O Angular pode melhorar perfeitamente a funcionalidade dos elementos de formulário padrão usando diretrizes, e discutiremos suas vantagens, incluindo:
Vinculação de dados, criação de atributos de modelo, formulário de verificação, informações de feedback após o formulário de verificação, atributos de instrução do formulário
Abaixo, verificamos o uso deles por meio de casos:
1. Ligação de dados bidirecionais (modelo ng) e modelo de criação de propriedades
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> </ad Head> <body> <!-case: ligação de dados bidirecional-> <div ng-controller = "defaultctrl"> <!-Filtre itens que é False-> <H3> para fazer <nan> {{ 'FALSE'}). Length}} </span> </h3> <div> <div> <div> <etiqueta para = "ação"> ação: </elated> <!-ng-modelo-model Bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirire -sereção bidirireirireirireSial bidirireSireirireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireirirerenteiro bidirireSireireiriro bidirireSireiriro bidirireSireirirerenteiro bidirireSirenteiro bidirireSireireirireSireirirerenteiro bidirireSireirirerenteiro bidirireStional Bidirente Bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirire -sereção bidirireirireirireSial bidirireSireirireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireirirerenteiro bidirireSireireiriro bidirireSireiriro bidirireSireirirerenteiro bidirireSirenteiro bidirireSireireirireSireirirerenteiro bidirireSireirirerenteiro bidirireStional Bidirente Bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirecional bidirire -sereção bidirireirireirireSial bidirireSireirireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireireirireirirerenteiro bidirireSireirirerenteiro bidirireSireireiriro bidirireSireiriro bidirireSireirirerenteiro bidirireSirenteiro bidirireSireireirireSireirirerenteiro bidirireSireirirerenteiro bidirireStional Bidirente Bidirectional bi-> <!-Quando uma das partes envia a substituição, a outra também muda-> <input type = "text" id = "action" ng-model = "newtodo.action"> </tpthtion> <div> <bel para = "local"> Localização: </Label> <select ID = "Location" NG-Model = "Newnytodo"> Localização: </Label> <select = "Location" "" <G-Model = "Newnodo"> Localização: </Label> <select = "Location" "" <pution> Mall </pption> </leclect> </div> <!-ng clique clique em Adicionar para adicionar o item-> <botão ng-click = "AddNewItem (newtodo)"> add </button> </div> <div> <tá tabela> <thead> <tr> <h>#<//</th> thh> thhe <the> <thead> <tr> <h> ng-repeat = "Item em Todos"> <!-$ Index Padas para 0, incremento-> <td> {{$ index + 1}} </td> <td> {{item.action}} </td> <td> <typ type = "check" ng-model}}}}}}}}}}}}}} </td> <td> <typ type = "check" thebl "the> the </td </td> <td> <but type =" CHECTOBO "NG-Model = ".com.com.com" </div></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">// define a module named exampleAppangular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($ SCOPE) {// Modelo de dados $ scope.todos = [{Action: "Play Ball", Complete: false}, {Action: "Singing", Complete: False}, {Action: "Running", completo: True}, {Ação: "dança", completa: True}, {Ação: "NATACIONAL", False: {Action: {"; $ scope.addnewitem = function (newItem) {// determine se (angular.isdefined (newItem) && angular.isdefined (newItem.action) && angular.isdefined (newitem.location) {$ scope.todos.em ({ação: newitem.Action + " }) </script> </body> </html>Primeiro, o Modelo de Dados Scope.Todos e o método addNewItem () para adicionar dados ao modelo são definidos. Em seguida, a ação e a localização do formulário na visualização e no escopo.todos no modelo são ligadas usando o modelo de ligação de dados bidirecional NG-Model.
Finalmente, o método addNewItem () de adicionar dados ao modelo é acionado clicando no atributo.
2. Formulário de verificação
Antes de enviarmos o formulário ao servidor, precisamos verificar se os dados enviados pelo usuário existem ou são legais; caso contrário, o envio de dados inúteis desperdiçará recursos.
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </ad head> <body> <div id = "TodoPanel" ng--- ng-submit = "addUser (newUser) Quando os dados do formulário são legais, envie os dados ao modelo-> <nome name =" myform "novalidate ng-submit =" addUser (newUser) "> <div> <dg> <bel> name: </label> <!-tabela necessária este formulário é necessário" <!-ng-model <bel> name: </bel> <!-tabela necessária, este formulário é necessário "<!-ng-model <bel>" name = "nome de usuário" type = "text" exigido ng-model = "newUser.name"> </div> <div> <breting> email: </elated> <input name = "userEmail" type = "email" exigido ng-model = "newUser.email"> </div> <div> <belp> <inpp name = "acordoud" "Type" typen = "typen" e "typen" e "recking" e "newusher" typen "e" typen "e" recking ". Concorde com os termos e condições </cret> </div> <!-g-disabled = "myForm. </div> </morm> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module ("ExampleApp", []) .Controller ("defaultCtrl", functle (sctrl) ("sconts). $ scope.adduser = função (userDetails) {$ scope.message = userDetails.name + "(" + userDetails.email + ") (" + userDetails.agreed + ")";Primeiro, o método do modelo de dados.Message e addUser () para adicionar dados ao modelo são definidos. Em seguida, os elementos do formulário validam, o atributo de nome e o atributo ng-submit são adicionados à visualização. Em seguida, o modelo Ng de ligação de dados bidirecionais liga a ação e a localização do formulário na visualização e no escopo.Todos no modelo estão ligados e os atributos de verificação são necessários e os formulários de email são usados.
Em seguida, o botão Enviar está desativado. Ele só pode ser usado se todos os dados do formulário forem legais. Se for ilegal, será desativado (ng-disabled = ”myform. $ Inválido”)
Finalmente, os dados são enviados ao método addUser () do modelo é concluído através do atributo ng-submit.
3. Informações sobre feedback de verificação do formulário
Está longe de ser suficiente para verificarmos o formulário, porque o usuário está confuso porque ele não sabe por que o erro aconteceu. Portanto, precisamos fazer comentários nas informações ao usuário para que eles possam entender o que preencher
Primeiro, apresente as classes a serem verificadas em Ng
O usuário do NG-Pristine não possui elementos interativos adicionados a esta classe
Ng-Dirty O usuário interage com os elementos é adicionado a esta classe
Resultado de validação valida NG Elementos válidos são adicionados a esta classe
ng-nvalida O elemento inválido é adicionado a esta classe
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style>/*estilo interativo e necessário*/form.validate .ng-invalid-required.ng-Dirty {Background-color: laranja; } /*A interação é um estilo ilegal* / form .ng-invalid.ng-Dirty {Background-Color: LightPink; } /*O email é ilegal e interagido com* / form.Validate .ng-invalid-email.ng-Dirty {Background-Color: LightGoldenRodyellow; } div.error {cor: vermelho; Peso da fonte: negrito; } div.summary.ng-valid {color: Green; Peso da fonte: negrito; } div.summary.ng-invalid {color: Red; Peso da fonte: negrito; } </style> </ad Head> <body> <!-Caso: Bidirectional Data Linding-> <div ng --Troller = "DefaultCtrl"> <!-Novalidate = "Novalidate" apenas ng verificação-> <!-ng-submit = "addUser (newUser)" Add para o modelo-> <! Legal, ShowValidação é verdadeira, o que aciona a classe ng para validar-> <formulário name = "myform" novalidate = "notalidate" ng-submit = "adduser (newUser)" ng-class = "showValidation? 'validate': '' '> <div> <div> <breting> email: </celt> <input name = "email" type = "email" requerido = "requerido" ng-model = "newUser.email"> <!-Verificação Prompt-> <div> <!-mostre informações de feedback-> <span ng-class = "erro" ng-show = "Mostrar"> Show "-Mostrar informações sobre feedback-> <span-class =" error "show =" {{getError (myform.email. $ error)}} </span> </div> </div> <button type = "submit"> ok </button> <div> message: {{message}} <! ng-class = "myform. $ válido? 'ng-valid': 'ng-invalid' "> válido: {{myform. $ válido}} </div> </form> </div> <script type =" text/javascript "src =" js/angular.min.js "> </script> <script type =" text/javular "> ExampleAppangular.module ("ExampleApp", []) // Definir um controlador chamado DefaultCtrl .Controller ('DefaultCtrl', function ($ Scope) {// Adicionar dados ao modelo $ scope.adduser = function (userDETails) {if (myform. + ") (" UserDetails.Agreed + ")"; (Angular.isDefined (Error)) {if (Error.Rewired) {Retorne "Por favor, digite um valor";Primeiro, defina o estilo de informação de feedback e o estilo de verificação de formulário em estilo
Em seguida, escreva o feedback da informação quando o erro for escrito em JS
Finalmente vincule-se a classe ng na vista
4. Propriedades de instrução do formulário
1. Use o elemento de entrada
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </ad Head> <body> <div id = "TODOPALE" NG-CONTROLLER = "defaultCtrl"> <form = "myform" Noveldate = "Notalivate"> ng-required = "requerValue" o valor necessário através da ligação de dados-> <!-ng-minlengthing = "3" ng-maxlength = "10" caracteres máximo e mínimo permitidos-> <!-ng-pattern = "matchPattern" ng-rewring-> <input name = "amostra" "=" "inputVatern" ng-rewring->. ng-maxlength = "10" ng-pattern = "matchPattern"> </div> </div> <div> <!-requerir-> <p> Erro necessário: {{myform.sample. $ error.required}}} </p> <!-mínimo máximo-> <p> MIN Length Error: {{Myform.s.s. Erro: {{myform.sample. $ Error.maxlength}} </p> <!-Combine apenas letras minúsculas-> <p> Erro de padrão: {{myform.sample. $ Error.pattern}} </p> <!-verifique esse legal-> <p> elemento: {{myform.semple. type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript"> // define um módulo chamado ExampleAppangular.module ("ExampleApp", []) // define a scornor 'skinfulctrl .Controller (') ([]) // controlador de linha denominado $ scope.requirevalue = true;2. Selecione a lista
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> <style> </style> </head> <body> <div id = "TODOPALEL" ng-CONTROLLER = "defaultCtrl"> <formulário "myform" ã "ânor" nsenstroller = "> <-> <-> controller =" filain> <bactctrl "> <form =" myform "ã" ânor "<-<-> <-> <-> e"> e "relation" e "relation" e "e"> e "relation" e ") <-controller =" DIVN> <nivroller> <furStl> <bactCtrl "> <formulário" MyForm "ânoriate =" Notalivate "> <> <> classifica o item.id como item.action alteração Valor da opção-> <!-ng-options = "item.id como item.action grupo por item.Ploco para item em Todos"-> <selecione ng-model = "selectValue" ng-options = "item.id. {{selectValue || "None"}} </p> </div> </morm> </div> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javasscript"> // sfine um módulo denominado exemplapangular.module ("examcript"> // sfine um módulo denominada [AntPulpangular.module " .Controller ('DefaultCtrl', function ($ SCOPE) {// Dados do modelo $ scope.todos = [{id: 100, local: "Escola", ação: "Play Ball", Complete: False}, {id: 200, lugar: "Home", Ação: "Comer", Complete: False}, {ID: 300, Place: "Home", Ação: "Comer", " }) </script> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.