Skip to content
Related Articles

Related Articles

Improve Article

Angular forms NgForm Directive

  • Last Updated : 24 May, 2021

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 used
  • In 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :