Reactive forms
Reactive forms provide a model-driven input management model of forms whose values change over time. This guide is to show you how to do and review basic form controls, continue to use multiple controls in the group, verify form values, and create dynamic forms where you can add or remove controls during operation.
Functional forms are different from template-driven forms in different ways. Functional forms provide more assumptions with consistent access to the data model, consistency with visible operators, and shift tracking with visible streams.
Register the reactive forms module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ BrowserModule, FormsModule,ReactiveFormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Creating dynamic forms using FormGroup
app.component.ts
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MustMatch } from './must-match.validator';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) {
setTimeout(() => {
this.registerForm.controls['firstName'].disable();
this.registerForm.controls['lastName'].enable();
}, 2000)
}
ngOnInit() {
this.registerForm = this.formBuilder.group({
//'firstName': new FormControl({value: 'hello', disabled: true}),
title: ['', Validators.required],
firstName: ['first', [Validators.required]],
lastName: [{value: 'last',disabled: true}, Validators.required],
// validates date format yyyy-mm-dd
dob: ['', [Validators.required, Validators.pattern(/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
acceptTerms: [false, Validators.requiredTrue]
}, {
validator: MustMatch('password', 'confirmPassword')
});
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
// display form values on success
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));
}
onReset() {
this.submitted = false;
this.registerForm.reset();
}
}
this.registerForm = this.formBuilder.group({
//'firstName': new FormControl({value: 'hello', disabled: true}),
title: ['', Validators.required],
firstName: ['first', [Validators.required]],
lastName: [{value: 'last',disabled: true}, Validators.required],
// validates date format yyyy-mm-dd
dob: ['', [Validators.required, Validators.pattern(/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
acceptTerms: [false, Validators.requiredTrue]
}, {
validator: MustMatch('password', 'confirmPassword')
});app.component.html
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-row">
<div class="form-group col">
<label>Title</label>
<select formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
<option value=""></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Title is required</div>
</div>
</div>
<div class="form-group col-5">
<label>First Name</label>
<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
<div *ngIf="f.firstName.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group col-5">
<label>Last Name</label>
<input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
<div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
<div *ngIf="f.lastName.errors.required">Last Name is required</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label>Date of Birth</label>
<input type="date" formControlName="dob" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.dob.errors }" />
<div *ngIf="submitted && f.dob.errors" class="invalid-feedback">
<div *ngIf="f.dob.errors.required">Date of Birth is required</div>
<div *ngIf="f.dob.errors.pattern">Date of Birth must be a valid date in the format YYYY-MM-DD</div>
</div>
</div>
<div class="form-group col">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
<div class="form-group col">
<label>Confirm Password</label>
<input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
<div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
<div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
<div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" formControlName="acceptTerms" id="acceptTerms" class="form-check-input" [ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }" />
<label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
<div *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">Accept Ts & Cs is required</div>
</div>
<div class="text-center">
<button class="btn btn-primary mr-1">Register</button>
<button class="btn btn-secondary" type="reset" (click)="onReset()">Cancel</button>
</div>
</form>Angular add disabled attribute dynamically
In this example below we create a dynamic reactive form with dynamic disabled fields of firstName and lastName. After 2 second of view it will automatically disable and enable of firstName and lastName. How you disable and enable that example given below.
constructor(private formBuilder: FormBuilder) {
setTimeout(() => {
this.registerForm.controls['firstName'].disable();
this.registerForm.controls['lastName'].enable();
}, 2000)
}
ngOnInit() {
this.registerForm = this.formBuilder.group({
//'firstName': new FormControl({value: 'hello', disabled: true}),
title: ['', Validators.required],
firstName: ['first', [Validators.required]],
lastName: [{value: 'last',disabled: true}, Validators.required],
// validates date format yyyy-mm-dd
dob: ['', [Validators.required, Validators.pattern(/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required],
acceptTerms: [false, Validators.requiredTrue]
}, {
validator: MustMatch('password', 'confirmPassword')
});
}
7 thoughts on “Angular reactive form validation Example”