Reactive forms with Validation in Angular

Reactive forms are a way of creating forms in Angular that allows for direct manipulation of the form data. This allows for more control over the form and its behavior, as well as better handling of complex validation scenarios.

Validation in Angular is used to ensure that the data entered into a form is valid and meets certain criteria. This can include things like ensuring that a required field is filled out, that a field has a certain minimum or maximum length, or that a field has a certain format (such as an email address).

Validation in Reactive forms:

In reactive forms, validation is typically done using form controls and validation rules. Form controls are used to represent the individual fields in a form, and they can be configured with validation rules that specify the criteria that the data in the field must meet. When the user interacts with the form, the form controls will check the data against these rules and display any errors if the data is invalid. This allows real-time validation of the form data, allowing the user to quickly fix any errors before submitting the form.

First, we need to import the necessary modules and classes from the Angular Forms API:

import { FormGroup, FormControl, and Validators } from '@angular/forms';

Next, we can create a new FormGroup instance and define form controls and validation rules that we want to use:

signUpForm!: FormGroup;
isFormValid: boolean = false;

constructor(private fb: FormBuilder) 
{
}

ngOnInit(): void {
this.signUpForm = this.fb.group({
userName: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [
Validators.required,
Validators.minLength(8),
]),
});
}

In this example, we are creating FormGroup with three FormControls: username, email and password. We are using Validators.required validator to make sure that these fields are not empty.

Next, we can bind the signUpForm instance to the form element in our template using [formGroup] directive:

<form [formGroup]="signUpForm" (ngSubmit)="OnSubmit()">

<div class="form-group custom-div-main">

<div class="mb-3 custom-col">

<label for="userName">UserName</label>

<input type="text" class="form-control" id="userName" formControlName="userName">

<span *ngIf="isFormValid && signUpForm.get('userName')?.hasError('required')">

* User Name is required

</span>

</div>

</form>

Finally, we can add a submit button to our form and handle the submit event in our component:

<button class="btn btn-primary" type="submit">Submit</button>

OnSubmit() {

if (this.signUpForm.valid)

{

console.log(this.signUpForm);

} else

{

this.isFormValid=true;

}

}

In this example we are using the signUpForm.valid property to determine whether the form is valid and the signUpForm.get() method to retrieve the values of the username, email and password fields. These values can then be used to perform signup operation.

If the user didn’t enter the value in particular field it shows an error field is required as shown below.

In conclusion, Angular Reactive Forms with validations enable developers to design dynamic and user-friendly forms with data integrity, flexibility, and enhanced user experiences.