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 AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 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 AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read AngularJS ng-keyup Directive The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements. Syntax: <element ng-keyup="expression"> Contents... </element> Parameter: expression: When a keypress is finished, then t 2 min read AngularJS Directive AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwis 4 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read Like