Angular 9/8/7 NgForm Directive Example

Hello Devs, 

In this tutorial, we will learn Angular 9/8/7 NgForm Directive Example

*ngForm will help to create form. we can simply create form using ngModel and ngForm. below we will give you simple example of creating for with submit, set default value and reset form button in angular.

Follow this step by step guide below. 

Example:

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

  

import { AppComponent } from './app.component';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

src/app/app.component.ts

import { Component } from '@angular/core';

import {NgForm} from '@angular/forms';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

    

  onSubmit(myForm: NgForm) {

  

    console.log(myForm.value);

    console.log(myForm.valid);

      

  }

  

  setDefault(myForm: NgForm){

    myForm.resetForm({

      name: 'Hardik', 

      email: 'savanihd@gmail.com'

    })

  }

  

  resetFormValue(myForm: NgForm){

    myForm.resetForm()

  }

  

}

src/app/app.component.html

<h1>Angular NgForm Example - rathorji.in</h1>

  

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" novalidate>

   <input name="name" ngModel required #name="ngModel">

   <input name="email" ngModel required #email="ngModel">

   <br/>

   <button>Submit</button>

   <button type="button" (click)="resetFormValue(myForm)">Reset</button>

   <button type="button" (click)="setDefault(myForm)">Set Default Value</button>

</form>

  

<p>Name Field Value: {{ name.value }}</p>

<p>Name Field Is Valid?: {{ name.valid }}</p>

   

<p>Email Field Value: {{ email.value }}</p>

<p>Email Field is Valid?: {{ email.valid }}</p>

  

<p>Form value: {{ myForm.value | json }}</p>

<p>Form valid: {{ myForm.valid }}</p>

May this example help you.