ItSolutionStuff.com

Angular NgForm Example | NgForm Directive In Angular

By Hardik Savani • May 2, 2024
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, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 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...

Tags: Angular
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

šŸ“ŗ Subscribe on YouTube

We Are Recommending You

ā˜…

Angular NgStyle Example | NgStyle Directive In Angular

Read Now →
ā˜…

Angular NgClass Example | NgClass Directive In Angular

Read Now →
ā˜…

Angular NgSwitch Example | NgSwitch Directive In Angular

Read Now →
ā˜…

Angular NgIf Example | NgIf Directive In Angular

Read Now →
ā˜…

Angular NgFor Example | NgFor Directive In Angular

Read Now →
ā˜…

Angular NgIf Else | Ng If Else in Angular Example

Read Now →
ā˜…

File Upload with Angular Reactive Forms Example

Read Now →
ā˜…

Reactive Form with Validation in Angular 8

Read Now →
ā˜…

Template Driven Forms Validation in Angular 9/8 Example

Read Now →