AngularJS | Directiva de formato ng

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:
formulario
Después de hacer clic en el botón:
formulario

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:
formulario
Entrada válida:
formulario

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *