Angular NgForm Example | NgForm Directive In Angular 10/9/8

By Hardik Savani March 31, 2020 Category : Angular

Today our leading topic is angular ngform example. you can understand a concept of angular ngform directive example. i would like to show you angular ng form example. I’m going to show you about ngform in angular 9. Let's get started with ngform in angular 8 example.

I will give you simple example of how to use ngform to create form with angular 6, angular 7, angular 8, angular 9, angular 10, angular 11 and angular 12 application.

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

Let's see bellow example:


Before we use ng model, we must need to import "FormsModule" from '@angular/forms'; in module.ts file as bellow:


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

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

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

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


imports: [ BrowserModule, FormsModule ],

declarations: [ AppComponent],

bootstrap: [ AppComponent ]


export class AppModule { }


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

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


selector: 'my-app',

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

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


export class AppComponent {

onSubmit(myForm: NgForm) {




setDefault(myForm: NgForm){


name: 'Hardik',

email: ''



resetFormValue(myForm: NgForm){





<h1>Angular NgForm Example -</h1>

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

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

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



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

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


<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>

You can see bellow preview:

I hope it can help you...