Angular 9/8/7 NgModel Directive Example

Hello Devs, 

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

ngModel will help to bind input fiel. you can create form control instance using ngModel. ngModel will help to access form field value, status and error status.

Follow this step by step guide below. 

1) NgModel Simple 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';

  

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent  {

  name: string = 'Hardik';

  

  setValueName() { 

    this.name = 'Savani'; 

   }

}

src/app/app.component.html

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

  

<input [(ngModel)]="name" #ctrlName="ngModel" required>

 

<p>Value: {{ name }}</p>

<p>For Validation: {{ ctrlName.valid }}</p>

  

<button (click)="setValueName()">Set Value!</button>

2) NgModel with Form 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);

     

  }

  

}

src/app/app.component.html

<h1>Angular NgModel 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">

   <button>Submit</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.