Welcome to the Reactive Forms tutorial! In this comprehensive guide, we'll delve into the world of Angular reactive forms, covering everything from the basics to advanced examples. By the end of this tutorial, you'll have a solid understanding of how to create, validate, and manipulate forms using Angular's reactive approach.
Let's start by understanding what reactive forms are and why they are important.
Reactive forms is an Angular approach to creating forms by representing them as an immutable tree of FormGroup and FormControl objects. This approach provides a more declarative way to create forms, making them easier to manage, test, and understand.
Reactive forms have several advantages over template-driven forms:
Now that we have a clear understanding of what reactive forms are and why we should use them, let's dive into creating our first reactive form!
To create a reactive form, we'll start by importing the necessary modules:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';Next, we'll inject the FormBuilder into our component's constructor:
constructor(private fb: FormBuilder) {}Now, we can create a new form using the FormBuilder:
this.signUpForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
});In the code above, we created a new form called signUpForm with three fields: name, email, and password. Each field is associated with a validator to ensure that user input is valid.
š Note: The second argument in the field declaration is an array of validators. Angular will apply these validators to the corresponding form control.
Let's create a simple example of a reactive form and see it in action!
Create a new component called sign-up.component.ts and implement the code below:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.css'],
})
export class SignUpComponent implements OnInit {
signUpForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.signUpForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
});
}
// We'll add more methods here later
}Next, create the corresponding HTML template in sign-up.component.html:
<form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Name:</label>
<input formControlName="name">
<div *ngIf="signUpForm.get('name').errors && signUpForm.get('name').touched">
<small>Name is required.</small>
</div>
</div>
<div>
<label for="email">Email:</label>
<input formControlName="email">
<div *ngIf="signUpForm.get('email').errors && signUpForm.get('email').touched">
<small>Enter a valid email.</small>
</div>
</div>
<div>
<label for="password">Password:</label>
<input formControlName="password">
<div *ngIf="signUpForm.get('password').errors && signUpForm.get('password').touched">
<small>Password is required.</small>
</div>
</div>
<button type="submit">Sign Up</button>
</form>Now, run your Angular application and check out the new sign-up form in action! š
Validating reactive forms is straightforward. We simply need to specify validators for the form controls, as we did in our sign-up form example.
However, there are times when you may want to perform custom validation logic. In such cases, you can create custom validators.
Here's an example of a custom validator for ensuring password strength:
import { AbstractControl, ValidatorFn } from '@angular/forms';
const passwordStrengthValidator: ValidatorFn = (control: AbstractControl): { [key: string]: any } => {
const password = control.get('password').value;
const minLength = 8;
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasDigit = /\d/.test(password);
if (password.length < minLength || !hasUpperCase || !hasLowerCase || !hasDigit) {
return { passwordStrength: true };
}
return null;
};To use this validator, simply add it to the password field in your form:
this.signUpForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, passwordStrengthValidator]],
});Form arrays allow you to create and manage dynamic form controls, such as a shopping cart or a list of checkboxes.
To create a form array, use the FormArray class provided by Angular:
this.hobbies = this.fb.array([
this.fb.control('', Validators.required),
this.fb.control('', Validators.required),
]);In the code above, we created a new form array called hobbies with two form controls. You can dynamically add and remove form controls from a form array as needed.
What is the purpose of a form array in Angular reactive forms?
To access form values, use the value property of the form, form group, or form array:
const user = this.signUpForm.value;
const hobbies = this.hobbies.value;To access a specific form control, use the get method:
const name = this.signUpForm.get('name');
const hobbiesFormControl = this.hobbies.at(0);š Note: The at() method allows you to access a specific form control in a form array by its index.
In this tutorial, we learned about Angular reactive forms, their benefits, and how to create and validate them. We also explored form arrays, form control access, and custom validators.
Now that you've learned the basics of reactive forms, try creating your own sign-up form with custom validation and form arrays! Happy coding! š