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: Comment More infoAdvertise with us Next Article AngularJS ng-form Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read Angular forms NgForm Directive In this article, we are going to see what is NgForm in Angular 10 and how to use it. NgForm is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <form #FormName = "ngForm"> </form> NgModule: Module used by NgForm is: FormsModule Select 1 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read Angular forms NgModel Directive In this article, we are going to see what is NgModel in Angular 10 and how to use it. NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <Input [(NgModel)= 'name']> NgModule: Module used by NgModel is: FormsModule Selectors: [ngMod 1 min read Like