Os controles (entrada, selecione, textarea) são uma maneira de os usuários inserirem os dados. O formulário é uma coleção desses controles, com o objetivo de agrupar controles relacionados.
Formulários e controles fornecem serviços de verificação, para que os usuários possam receber instruções para entrada inválida. Isso fornece uma melhor experiência do usuário, pois os usuários podem obter feedback imediatamente e saber como corrigir o erro. Lembre -se de que, embora a verificação do cliente desempenhe um papel importante no fornecimento de uma boa experiência do usuário, ela pode ser simplesmente ignorada, portanto a verificação do cliente não é confiável. A verificação do lado do servidor ainda é necessária para um aplicativo seguro.
1. Formulário simples
A diretiva-chave para entender a ligação de dados bidirecional é o NGModel. O NGModel fornece ligação de dados bidirecionais de modelo para visualização e exibição ao modelo. E também fornece APIs a outras diretrizes para melhorar seu comportamento.
<! Doctype html> <html lang = "zh-cn" ng-App = "SimpleFform"> <head> <meta charset = "utf-8"> <title> PropertyEvaluation </title> <style type = "text/css"> .ng-cloak {exibição: nenhum; } </style> </ad Head> <body> <div ng-controller = "myctrl"> <form a notalidate> Nome: <input ng-model = "user.name" type = "text"> <br/> email: <input ng-model = "user.email" type "" type = "Radio"> masculino <insput value = "feminino" ng-model = "user.gender" type = "radio"> feminino <br/> <botão ng-click = "reset ()"> restaurar último salvo </tobless> <button ng-click = "update (usuário)"> salvar </button> </fort> <pre> form = {{{{{{{ json}} </pre> <pre> salvado = {{salva | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("simples deformados", []); App.Controller ("myctrl", function ($ scope, $ window) {$ scope.Saved = {}; $ scope.update = function (user) {$ scope.Saved = angular.copy (user);}; $ scope.reset ();2. Usando as classes CSS
Para fazer a forma, controles e ngmodel ricos em estilo, a aula a seguir pode ser adicionada:
No exemplo a seguir, use CSS para exibir a validade de cada controle de formulário. No exemplo, o user.name e o user.ail são necessários, mas quando são modificados (sujo), o plano de fundo parecerá vermelho. Isso garante que o usuário não se distraia com um erro até depois de interagir com o formulário (após o envio?) E descobrindo que sua validade não é atendida.
<! Doctype html> <html lang = "zh-cn" ng-app = "cSSCLASSES"> <head> <meta charset = "utf-8"> <title> csSclasses </title> <style type = "text/css"> .ng-cloak {nenhum: nenhum; } .css-form input.ng-invalid.ng-Dirty {background-color: #fa787e; } .css-form input.ng-valid.ng-Dirty {Background-color: #78FA89; } </style> </ad Head> <body> <div ng-controller = "myctrl"> <formulário novalidado name = "formname"> name: <input ng-model = "user.name" type = "text" requery> <br/> email: <input ng-model = "user.email" type = "email" "". ng-model = "user.gender" type = "radio"> masculino <insput value = "feminino" ng-model = "user.gender" type = "radio"> feminino <br/> <botão ng-click = "reset ()"> reset </button> <butt-lick = "update)"> salvar </button> </form> </button> json}} </pre> <pre> salvado = {{salva | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("cSSClassses", []); App.Controller ("myctrl", function ($ scope, $ window) {$ scope.Saved = {}; $ scope.update = function (user) {$ scope.Saved = angular.copy (user);}; $ scope.reset ();3. Ligação para a forma e controle do estado
No angular, um formulário é uma instância do formulador de formulário. As instâncias do formulário podem ser expostas ao escopo à vontade usando o atributo de nome (eu não entendo aqui, não há propriedade no escopo que sempre esteve no atributo de nome do formulário, mas como existe um método como "documento. Nome do formulário", ele ainda pode ser obtido). Da mesma forma, o controle é uma instância do ngmodelController. As instâncias de controle podem ser expostas para formar de maneira semelhante usando o atributo de nome. Isso mostra que as propriedades internas da forma e do controle são viáveis para a ligação nas vistas usando primitivas de ligação padrão.
Isso nos permite estender o exemplo acima seguindo os seguintes recursos:
<! Doctype html> <html lang = "zh-cn" ng-App = "ControlState"> <head> <meta charset = "utf-8"> <title> ControlState </title> <style type = "text/css"> .ng-cloak {exibição: nenhum; } .css-form input.ng-invalid.ng-Dirty {background-color: #fa787e; } .css-form input.ng-valid.ng-Dirty {Background-color: #78FA89; } </style> </ad Head> <body> <div ng-controller = "myctrl"> <formulário novato name = "formname"> name: <input ng-model = "user.name" name = "username" type = "text" requery> <br/> <div nname = "formname.Username". No nome </span> </div> email: <insput ng-model = "user.mail" name = "userEmail" type = "email" necessário> <br/> <div ng-show = "formname.userEmail. Email </span> <span ng-show = "formname.userEmail. $ Error.mail"> Este não é um email válido </span> </div> gênero: <insput value = "masculino" ng-model = "user.gender" type = "radio"> masculino <input valor "feminino" "" female "[user.gender" "type =" radio "> masculino <input =" feminino "" "" "/" user.gender "" ng-model = "user.Agree" name = "userAgree" requerido/> eu concordo: <input type = "text" ng-show = "user.Agree" ng-model = "user.agreesign" requerir/> <div ng-show = "! formname.userragree ||! ng-disabled = "isunchanGed (user)"> redefinir </button> <botão ng-click = "update (user)" ng-disabled = "formname. json}} </pre> <pre> salvado = {{salva | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("controlState", []); App.Controller ("myctrl", função ($ scope, $ window) {$ scope.Saved = {}; $ scope.update = function (user) {$ scope.Saved = angular.copy (user);}; $ scope.reset = function () {scope.USER = angular.Copy; = função (usuário) {return angular.equals (usuário, scope.SAVED);4. Validação personalizada
O Angular fornece implementações para os tipos públicos de formulário HTML (entrada, texto, número, URL, email, rádio, caixa de seleção), e também existem diretivas (exigidas, padrão, inlength, maxlength, min, max) para verificação de formulário.
Podemos definir nosso próprio plug-in de verificação definindo a diretiva no controlador NGModel (este é o ngmodelController conectado?). Para obter um controlador, a diretiva especifica as dependências como no exemplo a seguir (a diretiva define o atributo requer no objeto).
Modelo para visualizar a atualização - Sempre que o modelo mudar, todas as funções no ngmodelController. (http://code.angularjs.org/1.0.2/docs/api/ng.direction:ngmodel.ngmodelcontroller#$setValidity).
View to Model Update - de uma maneira semelhante, não importa sempre que um usuário interaja com um controle, ngmodelcontroller. $ SetViewValue será acionado. Agora é a vez de executar ngmodelcontroller $ parsers (quando o controle obtém o valor do DOM, todos os métodos nessa matriz serão executados, os valores serão revisados, filtrados ou convertidos e também verificados).
No exemplo seguinte, criaremos duas diretivas.
O primeiro é o número inteiro, responsável por verificar se a entrada é um número inteiro válido. Por exemplo, 1,23 é um valor ilegal porque contém a parte fracionária. Observe que usamos o NEMBIFT para substituir empurrar a cauda inserindo -a na cabeça da matriz, porque queremos que ela seja executada primeiro e use o valor desse controle (estimando que a matriz é usada como uma fila), precisamos executar a função de verificação antes que a transformação ocorra.
A segunda diretiva é de float inteligente. Ele converte "1.2" e "1,2" em um número de ponto flutuante legal "1.2". Observe que não podemos usar o tipo de entrada HTML5 "Número" aqui, porque o navegador não permite que os usuários digitem caracteres ilegais que esperamos, como "1,2" (ele reconhece apenas "1.2").
<! Doctype html> <html lang = "zh-cn" ng-App = "CustomValidation"> <head> <meta charset = "utf-8"> <title> CustomValidation </title> <style type = "text/css"> .ng-cloak {display: nenhum; } .css-form input.ng-invalid.ng-Dirty {background-color: #fa787e; } .css-form input.ng-valid.ng-Dirty {Background-color: #78FA89; } </style> </ad Head> <body> <div> <form novalidate name = "formname"> <div> size (número inteiro 0-10): <entrada inteira tipo = "número" ng-model = "size" name = "size" min = "0" max = "10/> {{size}} <br/> Não é um número inteiro válido </span> <span ng-show = "formname.size. $ error.min || formname.size. $ error.max"> o valor deve estar entre 0 e 10 </span> </div> ng-show = "formname.length.0error.float"> Este não é um número de ponto flutuante válido </span> </div> </morm> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <critt type = "text/jest/jApTrAscrct"> </script> <cript type = "text/js" "" []); var Integer_Regexp =/^/-?/D*$/; App.Directive ("Integer", function () {return {require: "ngmodel", // ngmodelController link: function (escopo, ele, attrs, ctrl) {ctrl. // Certificar e certificar -se de Ctrl. var float_regexp = /^/-? App.directive ("Smartfloat", function () {return {require: "ngmodel", link: function (escopo, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (ctrle) {if (float_regexp.test (viewValue)) {ctrl) {se parsefloat (ViewValue.replace ("," "");5. Implementando o controle de formulário personalizado (usando ngmodel)
A angular implementa os controles básicos de todo o HTML (entrada, selecione, textarea) e é competente para a maioria dos cenários. No entanto, se precisarmos ser mais flexíveis, podemos alcançar o objetivo de personalizar o controle do formulário escrevendo uma diretiva.
Para desenvolver controles e ngmodel para trabalhar juntos e implementar a ligação de dados bidirecionais, é necessário:
A implementação do método Render é o método responsável pela renderização de dados após executar e passar todos os métodos NGMODelController. $ Formatters.
Ligue para o método $ setViewValue e o modelo precisa ser atualizado em resposta, não importa quando o usuário interage com o controle. Isso geralmente é implementado no ouvinte do evento DOM.
Você pode visualizar $ compileProvider.Directive para obter mais informações.
O exemplo a seguir mostra como adicionar um recurso de ligação de dados bidirecional a um elemento que pode ser editado.
<! Doctype html> <html lang = "zh-cn" ng-app = "CustomControl"> <head> <meta charset = "utf-8"> <title> CustomControl </title> <style type = "text/css"> .ng-cloak {display: nenhum; } div [contentDitable] {cursor: Pointer; Background-Color: #D0D0D0; } </style> </ad Head> <corpo ng-controller = "myctrl"> <div> <div contentedable = "true" ng-model = "content"> meu pequeno dada </div> <pre> modelo = {{content}} </pre> <butão ng-click = "resset ()"> Model de set. src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("customControl", []); App.Controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "meu pequeno dada"; // como obter ngmodelcontroller aqui? Se você sabe, espero que você possa me dar alguns conselhos!};}); App.directive ("contentedável", function () {return {require: "ngmodel", link: function (escopo, ele, attrs, ctrl) {// view -> modelo ele.bind ("blasurviep", function () {scope. });