La directiva ng-form en AngularJS se usa para crear un formulario anidado, es decir, un formulario dentro del otro formulario. Especifica un control heredado del formulario HTML. Crea un grupo de control dentro de una directiva de formulario que se puede usar para determinar la validez de un subgrupo de controles.
Sintaxis:
<ng-form [name="string"]> Contents... </ng-form>
Ejemplo 1: este ejemplo utiliza la directiva ng-form para ocultar los campos de texto de entrada y mostrar su contenido.
<!DOCTYPE html> <html> <head> <title>ng-form Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> </head> <body ng-app="" style="text-align:center"> <h1 style="color:green;">GeeksforGeeks</h1> <h2 style="">ng-form Directive</h2> <div> <ng-form ng-hide="isDetail"> Full Name: <input type="text" ng-model="fName"> <br><br> Username: <input type="text" ng-model="uName"> <br> </ng-form> <br> <input type="button" ng-click="isDetail=true" value="Click it!" /> <div ng-show="isDetail"> First Name:<b>{{fName}}</b><br /> User Name:<b>{{uName}}</b><br /> </div> </div> </body> </html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo utiliza la directiva ng-form para validar el correo electrónico y guardarlo.
<!DOCTYPE html> <html> <head> <title>ng-form Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> </head> <body ng-app="" style="text-align:center"> <h1 style="color:green;">GeeksforGeeks</h1> <h2 style="">ng-form Directive</h2> <div> <ng-form ng-submit="save(user)" name="myForm" novalidate> Enter Email: <input type="email" name="uname" required ng-model="user.userName"><br> <span style="color:red" ng-show="myForm.uname.$error.required && myForm.uname.$dirty">Email is required</span> <br> <button ng-disabled="!myForm.$valid" type="submit"> save </button> </ng-form> </div> </body> </html>
Salida:
Entrada no válida:
Entrada válida:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA