Recentemente, os erros restantes dos componentes mantidos em mãos são verificação de formulários, e a lógica dentro do código de verificação do formulário da empresa não foi clara há gerações, e a estrutura do código não é muito angular.
É muito necessário ter uma compreensão profunda da verificação de formulários.
<corpo ng-controller = "MainController"> <formulário name = "form" novidato = "Novalidate"> <nome de entrada = "text" type = "email" ng-model = "name"> </mand> </body>
Ngmodel é uma magia negra angular, que realiza a ligação de mão dupla. Quando o valor do nome mudar, o valor de entrada também será alterado.
Quando a entrada do usuário altera o valor, o valor do nome também será alterado.
O objetivo do novalidate = "Notalidate" é remover a verificação do formulário que acompanha o sistema.
Depois de analisar o código acima, o Angular gerará uma variável "formulário" e $ scope.form sob o escopo $ do MAINController. O nome dessa variável é o mesmo que form.name em html.
E $ scope.form.text é o modelo da caixa de entrada de texto, herdada da ngmodelController.
Onde a instância $ scope.form é do formcontroller. Seu conteúdo é:
O modelo (ou seja, $ scope.form.text) da caixa de entrada de texto é:
Onde $ DIRTY/$ PRISTINO, $ VILUD/$ inválido, $ ERRO são atributos comuns. Especialmente $ erro.
A verificação de forma mais fácil:
Depois de entender o formulário e a caixa de entrada, você pode primeiro editar o comando mais simples para exibir o erro.
O conteúdo HTML é o seguinte:
<name de forma = "form" notalidate = "Notalidate"> <input name = "text" type = "email" ng-model = "name" error-tip> </morm>
O código de comando é o seguinte:
// Quando o erro da caixa de entrada ocorre, o erro é exibido diretiva ("errorTip", function ($ compile) {return {Restritt: "A", requer: "ngmodel", link: function ($ scope, $ elemento, $ atts, $ ngmodel) (// Crie Subscope SursCope = $ scope. ng-if = "Haserror ()"> {{erros () |. {Email: true, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error;} // compile a instrução errada e coloque -a na caixa de entrada após $ element.after ($ compilation (tip) (subcope));}}});Vamos dar uma olhada nos resultados da execução primeiro:
Ao inserir um endereço de e -mail inválido:
Ao inserir o endereço de e -mail correto:
A diretiva ErrorTIP começa obtendo o NGMODelController por meio de requer: "ngmodel". Em seguida, crie um elemento para exibir o erro na caixa de entrada.
$ compilação é usada aqui e o $ compile é usado para compilar e exibir dinamicamente o conteúdo HTML.
Quando houver um conteúdo de erro, o elemento errado será exibido.
Por que os métodos de acesso ao subscópio podem acessar o HasError e Errors?
Por causa da cadeia de protótipo. Basta olhar para a foto abaixo para saber.
Personalize o conteúdo do erro
Ok, é óbvio que a verificação do formulário não está disponível agora. Devemos personalizar o conteúdo do erro a ser exibido e há mais de um erro a ser exibido.
Use Ng-repetir para exibir vários erros, ou seja, use o comando "errorTip"
tip = '<span ng-if = "hasError ()"> {{erros () | json}} </span> ';Mudar para:
tip = '<ul ng-if = "hasError ()" ng-repeat = "(ErrorKey, errorValue) em erros ()">' +'<span ng-if = "errorValue"> {{ErrorKey | ErrorFilter}} </span> ' +' </ul> ';Onde o ErrorFilter é um filtro para exibição personalizada de mensagens de erro. Um filtro é realmente uma função.
O código é o seguinte:
.Filter ("ErrorFilter", function () {Return function (input) {var errrorMessagesMap = {email: "Por favor, digite o endereço de email correto", xxoo: "não é adequado para crianças"} retorna errorMessagesMap [input];}});Os resultados são os seguintes:
Ok, aqui podemos lidar com a verificação de formulário "simples". Sim, simples. Devemos continuar a ir mais fundo.
Verificação de formulário personalizado!
Então, vamos implementar uma verificação de formulário que não pode ser inserida em "Handsome Guy".
As instruções são as seguintes:
.Directive ("DonotinputhDowboy", function ($ compile) {return {Restritt: "A", requer: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (função (value) {se (se inválido, $ erro se tornará {bonito: true} $ ngmodel.Os resultados são os seguintes:
Há duas coisas principais aqui, $ ngmodel. $ Parsers e $ ngmodel.
$ ngmodel. $ Parsers é uma matriz. Ao inserir conteúdo na caixa de entrada, ele atravessará e executará as funções em $ Parsers.
$ ngmodel. $ setValidity ("bonito", falso); Configurar bonito como inválido definirá $ ngmodel. $ Error ["Handsome"] = true;
Exclua $ ngmodel. $$ Sucesso ["Handsome"] também está definido e você pode procurar o código -fonte para obter detalhes.
Aqui vou resumir o processo.
-> Entrada do usuário
-> Angular executa todas as funções em $ Parsers
-> Inspecione $ setValidity ("XXOO", false); Então XXOO será definido como $ ngmodel. $ Error ["XXOO"]
-> Então a instrução ErRorTip ng-repetir $ ngmodel. $ Error
-> Errorfilter vai escapar da mensagem de erro
-> A mensagem de erro foi exibida no final
Personalize o conteúdo de exibição da caixa de entrada
Muitas vezes, o desenvolvimento não é tão simples quanto verificar erros e exibir erros. Às vezes, temos que formatar o conteúdo da caixa de entrada.
Por exemplo, "1000" é exibido como "1.000"
"Olá" aparece como "Olá"
Agora vamos implementar iniciais automáticas.
O código -fonte é o seguinte:
<forma name = "form" novelidate = "Notalidate"> <input name = "text" type = "text" ng-model = "nome" superior superior> </morm> .Direction ("Uppercase", function () {return {restringir: "a", requer: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewValue; if (angular.isuNefined (value)) {viewValue = ""; ViewValue [0] .touppercase () + ViewValue.substring (1); // Defina o conteúdo da interface $ ngmodel. $ setViewValue (ViewValue); // recurso para a interface, esta função é muito importanteAqui usamos $ setViewValue e $ render, $ setViewValue para definir o ViewValue para o valor especificado e o $ render exibe ViewValue na interface.
Muitas pessoas pensam que o uso de $ setViewValue pode atualizar a interface, mas não usam $ render e, no final, a interface não foi atualizada, não importa o que faça.
Se apenas $ ngmodel. Outra situação é que o conteúdo da caixa de entrada precisa ser atualizado:
Isso é uma ligação bidirecional. Por exemplo, a caixa de entrada agora está vinculada a $ scope.name no MainController. Quando o usuário altera o $ scope.name para "hello" de outras maneiras, a capitalização da primeira letra não pode ser vista na caixa de entrada.
Neste momento, você precisa usar o $ Formatters, então vamos ver um exemplo primeiro.
<corpo ng-controller = "MainController"> <formulário name = "form" novidato = "Notalidate"> <botão ng-click = "aleatom ()"> aleatório
Conteúdo MainController:
angular.module ("app", []).É simples o suficiente. Quando você clica no botão, $ SCOPE.NAME se torna um conteúdo aleatório começando com Hello.
É óbvio que a carta inicial de olá não está capitalizada, não o que queremos.
Modificamos o conteúdo do seguinte comando:
.Directive ("maiúsculo", function () {return {Restrive: "A", requer: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ ngmodel. $ setViewValue (ViewValue); // Renderizar à interface, essa função é muito importante $ ngmodel. $ render (); na função string handlemettyVale (valor) {return angular.isundefined (valor)?Resumindo:
1.
-> Usuário insere conteúdo na caixa de entrada
-> Travessal angular da função em $ ngmodel.
-> Na função na matriz $ ngmodel. $ Parsers, modificamos $ ngmodel. $ ViewValue e, em seguida, $ ngmode. $ Render () renderiza o conteúdo.
2.
-> gerar seqüências aleatórias através de botões para definir para citar
-> Toda vez que a detecção suja determinará se o valor do nome é inconsistente com $ ngmodel. $ ModelValue (aqui é implementado usando $ relógio). Se inconsistente, itera através de todas as funções em $ formatadores em ordem inversa e execute e atribua o valor final de retorno a $ ngmodel. $ ViewValue
-> Atualize o conteúdo da caixa de entrada
O exemplo pode "Personalizar o conteúdo de exibição da caixa de entrada" pode ser otimizado?
Por que otimizar?
O motivo é muito simples. Para implementar "Conteúdo personalizado", $ Parsers e $ Formatters são usados. De fato, o conteúdo dos dois é muito semelhante! Isso é muito importante.
Como otimizar?
Use $ ngmodel. $ Validadores.
OK, agora mude o exemplo.
.Directive ("em alta", function () {return {Restritt: "A", requer: "ngmodel", link: function ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3 é suportado. Se você entra manualmente ou atualiza modelValue através de outros lugares, $ ngmodel. uppercasefirstword (handlemetyValue (modelValue)); // Defina o conteúdo da interface $ ngmodel. $ setViewValue (ViewValue); // recurso para a interface, essa função é muito importante $ ngmodel. HandlemempyValue (Valor) {return angular.isundefined (valor)?O código é muito mais simples, suportado apenas por $ ngmodel. $ Validadores na versão 1.3 ou acima.
Se o valor de retorno de $ ngmodel. Isso é semelhante ao $ ngmodel.