Angular 9/8/7 NgForm Directive Example

This post is focused on ngform in angular 9/8/7 example. I’m going to show you about angular ngmodel ngform example. i would like to show you angular ngForm reset example. I’m going to show you about angular 9/8/7 ng form submit example.

I will give you simple example of how to use ngform to create form with angular 6, angular 7, angular 8 and angular 9 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: 'savanihd@gmail.com'



resetFormValue(myForm: NgForm){





<h1>Angular NgForm Example - HDTuto.com</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...

April 25, 2020 | Category : Angular

Blog Search