How to use Reactive forms in Angular

There are two approaches to create forms in Angular, this blog post covers the second approach which is Reactive forms.

Forms are an integral part of a website primarily used to capture user data. The most common challenge I faced as a beginner was adding proper validations to make sure appropriate data is entered by the user.

The Traditional method which I followed was using Regular Expressions (Regex) and inbuilt HTML 5 attributes like minLength,maxLength. These methods were not relevant when it comes
creating forms in Angular.

Reactive forms provide an easier way to create forms and also take care of the validations.
To know more about Reactive forms by following this link.

The very first step for using Reactive forms in your Angular Project is to import this feature in the app.module.ts file.

import { ReactiveFormsModule } from '@angular/forms';

The entire validation and logic part is implemented in the component.ts (component class file) file.

Here is how your template syntax should look like:

<form [formGroup]="tutorialForm" (ngSubmit)="onSubmit(tutorialForm)">
<input type="text" formControlName="name" placeholder="Your name">
<div *ngIf="tutorialForm.controls['name'].invalid &&
(tutorialForm.controls['name'].dirty ||
tutorialForm.controls['name'].touched)" class="alert alert-
danger">
<div *ngIf="tutorialForm.controls['name'].errors.required">
Name is required.
</div>
<div *ngIf="tutorialForm.controls['name'].errors.pattern">
Invalid value for Name
</div>
</div>
<input type="email" formControlName="email" placeholder="Your email">
<div *ngIf="tutorialForm.controls['email'].invalid &&
(tutorialForm.controls['email'].dirty ||
tutorialForm.controls['email'].touched)" class="alert alert-
danger">
<div *ngIf="tutorialForm.controls['email'].errors.required">
Email is required.
</div>
<div *ngIf="tutorialForm.controls['email'].errors.email">
Invalid value for Email.
</div>
</div>
<input type="password" formControlName="password" placeholder="Your password">
<div *ngIf="tutorialForm.controls['password'].invalid && (tutorialForm.controls['password'].dirty || tutorialForm.controls['password'].touched)" class="alert alert-danger">
<div *ngIf="tutorialForm.controls['password'].errors.required">
Password is required.
</div>
</div>
<button [disabled]="tutorialForm.pristine || tutorialForm.invalid" type="submit">Send</button>
</form>

In the above example

• [formGroup] property is used to assign/link a group name that is later used by the FormGroup within the component class.
• formControlName is used to uniquely identify each element in a form group.
• The errors are displayed whenever a user enters invalid data into the field.
• The submit button remains disabled until the form data is valid.
• onSubmit is a function called when the user submits the form.

*Note: formControlName should be unique for each field *

Here is how your component class should look like:

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

• Importing the properties from angular forms.

tutorialForm: FormGroup;
constructor(private formBuilder: FormBuilder)

• Creating an instance of the properties.

createTutorialForm() {
this.tutorialForm = this.formBuilder.group({
name: [ '' , [Validators.required,Validators.pattern("[a-zA-Z][a-zA-Z ]+")]],
email: ['', Validators.compose([Validators.required, Validators.pattern(/^(\d{10}|\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3}))$/)])],
password: ['', Validators.required ]
})
}

• The next step is creating a function that makes use of the formBuilder helper.
• The form group and form control names are the same that we used in our template, and how we initialize our form group in the our createTutorialForm() function.
• Validators.required: Checks if the user has left the field empty.
• Validators.pattern("[a-zA-Z][a-zA-Z ]+")] : Checks data entered by the user is of the required pattern i.e [a-zA-Z][a-zA-Z ]+ valiates the user to only enter alphabets.

ngOnInit() {
this.createTutorialForm();
}

• We need to call the function within the ngOnInit lifecycle hook.

https://amplified-raft-bef.notion.site/ROUGH-NOTES-379288902d954a4da1eb2824d6434837

These are the following steps involved in implementing a Reactive form in Angular.