Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-form Directive

  • Last Updated : 29 Mar, 2019

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.




<!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>                    

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.




<!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>                    

Output:
Invalid Input:
ngform
Valid Input:
ngform




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!