Angular NgForm Example | NgForm Directive In Angular 9/8

Angular NgForm Example | NgForm Directive In Angular 9/8

In this post we will give you information about Angular NgForm Example | NgForm Directive In Angular 9/8. Hear we will give you detail about Angular NgForm Example | NgForm Directive In Angular 9/8And how to use it also give you demo for it if it is necessary.

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

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

}

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 - ItSolutionStuff.com</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>

You can see bellow preview:

I hope it can help you…

Hope this code and post will helped you for implement Angular NgForm Example | NgForm Directive In Angular 9/8. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

69  +    =  72

We accept paid advance and paid guest Posting on our Site : Contact US