AngularJS | ng-form Directive

The ng-form Directive in AngularJS is used to create nested form i.e. one form inside the other form. It specifies an inherit control from HTML form. It creates control group inside a form directive which can be used to determine the validity of a sub-group of controls.

Syntax:

<ng-form [name="string"]> Contents... </ng-form>

Example 1: This example uses ng-form Directive to hide the input text fields and display its content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-form Directive</title>
      
    <script src=
    </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>                    

chevron_right


Output:
Before Clicking the button:
ngform
After Clicking the button:
ngform

Example 2: This example uses ng-form Directive to validate email and save it.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-form Directive</title>
      
    <script src=
    </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>                    

chevron_right


Output:
Invalid Input:
ngform
Valid Input:
ngform



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.