AngularJS proporciona un rico relleno de formularios y verificación. Podemos usar Ng-Hick para manejar el evento de clic AngularJS Button, y luego usar las banderas $ sucias y $ inválidas para verificarlo. Use la declaración de formulario Novalidate para prohibir cualquier verificación específica del navegador. Los controles de formulario utilizan muchas actividades de esquina. Echemos un vistazo rápido a los eventos primero.
evento
AngularJS proporciona múltiples eventos que pueden estar asociados con los controles HTML. Por ejemplo, el clic NG generalmente se asocia con un botón. Los siguientes son eventos apoyados por AngularJS.
hinchazón
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseave
ng mousemove
ng-mouseover
ng-keydown
ng-keyup
ng-keypress
cambio
hinchazón
Use el comando para hacer clic en un botón para restablecer los datos.
<input name = "FirstName" type = "text" ng-model = "firstName" require> <input name = "lastName" type = "text" ng-model = "lastName" required> <input name = "correo electrónico" type = "correo electrónico" ng-model = "correo electrónico" requerido> <botte ng-Click = "reset ()" RESET </botin> <script> Función student $ scope.reset = function () {$ scope.firstname = "mahesh"; $ Scope.lastName = "Parashar"; $ scope.email = "[email protected]"; } $ scope.reset ();} </script>Verificar datos
Se pueden usar los siguientes errores de seguimiento.
$ Dirty - La estipulación ha sido cambiada.
$ inválido-el estado de este valor no es válido.
$ error: indica el error exacto.
ejemplo
Los siguientes ejemplos mostrarán todas las instrucciones anteriores.
testangularjs.html
<html> <fead> <title> Angular JS forma </title> <style> Table, Th, Td {Border: 1px Solid Grey; Colapso de borde: colapso; relleno: 5px;} tabla tr: nth-child (impar) {background-color: #f2f2f2;} tabla tr: nth-child (incluso) {background-color: #ffffff;} </style> </head> <body> <h2> Angularjs Sample Aplement </h2> <v ng-app = "" ng-controller = " novelidato> <table> <tr> <td> Ingrese el nombre: </td> <td> <input name = "firstName" type = "text" ng-model = "firstName" required> <span style = "color: rojo" ng-show = "studentform.firstname. $ sucio && studentform.firstname. $ invalid"> <span ng-show = "studentform.firstname. $ error.required"> se requiere nombre de primer. </span> </span> </td> </tr> <tr> <tr> <td> Ingrese apellido: </td> <td> <input name = "LastName" type = "Text" ng-model = "LastName" requirir> <span style = "color: rojo" ng-show "shinding". && studentform.lastName. $ invalid "> <span ng-show =" studentform.lastName. $ error.required "> apellido es necesario. </span> </span> </td> </tr> <tr> <tr> <td> correo electrónico: </td> <td> <color de entrada =" correo electrónico "tipo =" correo electrónico "ng-model =" correo electrónico "larga =" 100 "100" 100 "requerido:" requerido " ng-show = "studentform.email. $ sucio && studentform.email. $ invalid"> <span ng-show = "studentform.email. $ error.Required"> Se requiere correo electrónico. </span> <span ng-show = "studentform.email. $ error.email"> dirección de correo electrónico inválida. </span> </span> </td> </tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> ng-click = "rest ()"> restablecer </boton> </td> <td> <button ng-disable = "studentform.firstname. $ sucio && studentform.firstname. $ invalid || studentform.email. $ invalid "ng-click =" subsit () "> Enviar </botón> </td> </tr> </table> </form> </div> <script> function studentController ($ scope) {$ scope.reset = function () {$ scope.firstname =" mahesh "; $ scope.name =" parashar "; "[email protected]"; } $ scope.reset ();} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Producción
Abra textangularjs.html en un navegador web. Los resultados son los siguientes.
Lo anterior es la clasificación de conocimiento de las formas angulares. Continuaremos agregando conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!