In this example, i will show you angular ngmodel example. you will learn angular ng model example. you can see how to use NgModel Directive in angular. you will learn NgModel Directive in angular example.I will give you simple example of how to use ngmodel with input field in form with angular 6, angular 7, angular 8 and angular 9 application.*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.
*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.
HERE, I WILL GIVE YOU TWO EXAMPLE SO YOU CAN UNDERSTAND HOW TO USE NG MODEL IN ANGULAR AND WHAT IS NG MODEL IN ANGULAR.
1) NgModel Simple Example
Before we use ng model, we must need to import “FormsModule” from ‘@angular/forms’; in module.ts file as bellow:
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 - discoverprograming.com</h1>
<input [(ngModel)]="name" #ctrlName="ngModel" required>
<p>Value: {{ name }}</p>
<p>For Validation: {{ ctrlName.valid }}</p>
<button (click)="setValueName()">Set Value!</button>Read Also: How to Add and Remove Form Fields Dynamically in Angular 9?
2) NgModel with Form Example
Before we use ng model, we must need to import “FormsModule” from ‘@angular/forms’; in module.ts file as bellow:
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 - discoverprograming.com</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>Read Also: Realtime Chat In Angular 9 Example with Node.js
{name: "tapas", email: "discoverprograming@gmail.com"}
trueI hope it can help you…
