AngularJS ng-form Directive
Last Updated :
01 Aug, 2022
Improve
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:
