Open In App

AngularJS ng-form Directive

Last Updated : 01 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
"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>
    <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=
"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>
    <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:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox