Here we are implement validation for a Angular Form using Reactive Forms Module and Bootstrap
First we will install Bootstrap. Check the steps how to install Bootstrap in angular project : How To Add Bootstrap 5 to Angular 13
Then we need to add the ReactiveFormsModule into our App Module.
Like this;
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now we create the Html form with input fields and validation messages will be show when input field are blanke.
We bind to the FormGroup in the appComponent.html file using [formGroup] directive. Form submit event will call submitData() handler above using event binding (ngSubmit).
appComponent.html
<div class="register-form mt-5">
<form [formGroup]="Userform" (ngSubmit)="submitData()">
<div class="form-group">
<label>Username</label>
<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && formCheck.username.errors }"/>
<div *ngIf="submitted && formCheck.username.errors" class="invalid-feedback">
<div *ngIf="formCheck.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && formCheck.password.errors }" />
<div *ngIf="submitted && formCheck.password.errors" class="invalid-feedback">
<div *ngIf="formCheck.password.errors.required">Password is required</div>
<div *ngIf="formCheck.password.errors.minlength"> Password must be at least 6 characters </div>
<div *ngIf="formCheck.password.errors.maxlength"> Username must not exceed 40 characters </div>
</div>
</div>
<div class="form-group mt-3" style="text-align: right;">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</form>
</div>
Now, open app/app.component.ts, we’re import necessary library first, because the app component Form Validation will be built with the @angular/forms
import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
Here, We use Angular FormBuilder to create a FormGroup. Validators provides a set of built-in validators like required, minLength, maxLength etc. that can be used by formControls.
appComponent.ts
export class AppComponent implements OnInit {
Userform!: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.Userform = this.formBuilder.group({
username: [ '', [Validators.required]],
password: ['',[Validators.required,Validators.minLength(6),Validators.maxLength(40)]],
});
}
}
Now we create a getter formCheck() function to access form controls (form.controls) from the template.
export class AppComponent implements OnInit {
....
get formCheck(): { [key: string]: AbstractControl } {
return this.Userform.controls;
}
....
}
Now we will check whether the form is blank or not by using onSubmit() event.
export class AppComponent implements OnInit {
....
submitData(): void {
if (this.Userform.invalid) {
this.submitted = true;
return;
} else {
console.log(this.Userform.value);
}
}
}
Here checking that the form will show error if it is invalid, otherwise it will show in the forms data on console.
0 Comments