How to use Forms in Angular4
In this blog, we’ll see how to use reactive forms in angular4.
We can work with two different types of forms: Template-driven and Reactive forms. In this post, we’ll see how to use reactive forms with example.
Angular4 Reactive forms:
Let’s create a template form with user required fields
<form>
<div>
<label>First Name</label>
<input type="text" name="first_name"/>
</div>
<div>
<label>Last Name</label>
<input type="text" name="last_name"/>
</div>
<div>
<label>Email</label>
<input type="text" name="email"/>
</div>
<button type="submit">Submit</button>
<button type="button">Cancel</button>
</form>In the above template, the requirements are
First Name: A unique first name should be provided.
Last Name: A unique last name should be provided.
Email: A valid email id that is unique and is required.
While using reactive forms import ReactiveFormsModule in your app.module.js and BrowserModule is used for bootstrap.
import {NgModule} from '@angular/core'
import {ReactiveFormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'
import { AppComponent } from './app.component';@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})export class AppModule {}
import FormGroup, FormControl, Validators in your app component(Reactive Form related classes)
- FormGroup — The value will be an object; Each object element should be a FormControl.
- FormControl — The value is a string or object; It is the default value of form control
import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core'@Component({selector: 'my-app',
templateUrl: 'src/app.component.html'
})export class AppComponent implements OnInit {private sampleForm: FormGroup;constructor() {}ngOnInit() { // Create new Form control with all your required fields. this.sampleForm = new FormGroup({
'first_name': new FormControl(),
'last_name': new FormControl(),
'email': new FormControl(),
});
}cancel() {
console.log(this.sampleForm);
}onSubmit() {
console.log('Form successful submit.');
console.log(this.sampleForm.value);
}}
In the above example, we have created FormGroup for the fields mentioned, Now we need to assign form object(formGroup, formControlName) to HTML as follows.
<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()">
<div>
<label>First Name</label>
<input type="text" name="first_name" formControlName="first_name"/>
</div>
<div>
<label>Last Name</label>
<input type="text" name="last_name" formControlName="last_name"/>
</div>
<div>
<label>Email</label>
<input type="text" name="email" formControlName="email"/>
</div>
<button type="submit">Submit</button>
<button type="button" (click)="cancel()">Cancel</button>
</form>When user clicks submit button then onSubmit() function triggers and provides you the form data in console(Here you can perform your logic), the same for the cancel.
