Angular forms NgForm Directive Last Updated : 24 May, 2021 Comments Improve Suggest changes Like Article Like Report 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 Selectors: [ngForm] Approach: Create the Angular app to be usedIn app.module.ts import FormsModule.In app.component.html make a form and store its value in ngForm variable and show its value in a JSON form.Serve the angular app using ng serve to see the output. Example 1: app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, BrowserAnimationsModule, ] }) export class AppModule { } app.component.html <form #gfgform = "ngForm"> {{ gfgform.value | json }} <br> <br> Name: <input type="text" name = 'name' ngModel> Email: <input type="email" name = 'email' ngModel> </form> Output: Reference: https://angular.io/api/forms/NgForm Comment More infoAdvertise with us Next Article Angular forms NgForm Directive T taran910 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Angular10 Similar Reads 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-form Directive 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 [ 1 min read Angular forms NgModelGroup Directive In this article, we are going to see what is NgModelGroup in Angular 10 and how to use it. The NgModelGroup is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <div ngModelGroup="name"></div> NgModule: Module used by NgModelGroup is: 1 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 FormGroupName Directive In this article, we are going to see what is FormGroupName in Angular 10 and how to use it. The FormGroupName is used to sync a nested FormGroup to a DOM element. Syntax: <form [FormGroupName] ="details"> Exported from: ReactiveFormsModule Selectors: [FormGroupName] Â Approach:Â Create the Ang 2 min read Like