Skip to content
Related Articles
Open in App
Not now

Related Articles

AngularJS ng-form Directive

Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
Improve Article
Save Article

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a 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 the ng-form Directive to hide the input text fields and display their content. 

HTML




<!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>
    <h3 >ng-form Directive</h3>
 
    <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:

 

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

HTML




<!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>
    <h3>ng-form Directive</h3>
    <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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!