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

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