Angular is a popular framework for developing dynamic web apps, and one of its most notable features is its robust forms module. Angular provides two types of forms: template-driven and reactive forms. In this post, we'll look into reactive forms in Angular, including their benefits, how to design them, and how to use them efficiently.
What are the reactive forms? Reactive forms, also known as model-driven forms, are a more adaptable and scalable way to create forms in Angular. Unlike template-driven forms, which essentially specify the form's behavior in the template, reactive forms are defined programmatically by creating form control objects with TypeScript classes.
Key Benefits of Reactive Forms
More control and flexibility: Reactive forms give developers more control over form validation, error handling, and dynamic form controls.
- Immutable data model: Reactive forms use an immutable data model, making it easier to track changes and manage form states.
- Better support for complex forms: Reactive forms are well-suited for building complex forms with dynamic form controls and complex validation requirements.
- Easier unit testing: Since form controls are created programmatically as TypeScript objects, they are easier to unit test compared to template-driven forms.
Creating Reactive Forms
To create a reactive form in Angular, follow these steps:
Import the necessary Angular modules
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
JavaScript
Define the form in the component class
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrl: './contact-form.component.css'
})
export class ContactFormComponent {
contactForm!: FormGroup;
constructor(private fb: FormBuilder) {
this.formBuilder();
}
private formBuilder() {
debugger;
this.contactForm = this.fb.group({
name: ['',Validators.required],
email: ['',[Validators.email,Validators.required]],
password: ['', [
Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{6,}$/), // Updated pattern
Validators.minLength(6),
Validators.required
]],
message: ['',Validators.required]
});
}
onSubmit() {
debugger;
if (this.contactForm.valid) {
console.log(this.contactForm.value); // You can send this data to your backend or perform other actions
this.contactForm.reset(); // Optional: Reset the form after submission
} else {
// Mark all form fields as touched to display validation errors
this.markFormGroupTouched(this.contactForm);
}
}
markFormGroupTouched(formGroup: FormGroup) {
debugger;
Object.values(formGroup.controls).forEach(control => {
control.markAsTouched();
if (control instanceof FormGroup) {
this.markFormGroupTouched(control);
}
});
}
}
Bind the form to the template
<div class="container">
<div class="card mt-4">
<div class="card-body">
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" class="form-control" formControlName="name">
<div *ngIf="contactForm.get('name')?.errors && contactForm.get('name')?.touched" class="invalid-feedback">
<div *ngIf="contactForm.get('name')?.hasError('required')">Name is required.</div>
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" class="form-control" formControlName="email">
<div *ngIf="contactForm.get('email')?.errors && contactForm.get('email')?.touched" class="invalid-feedback">
<div *ngIf="contactForm.get('email')?.hasError('required')">Email is required.</div>
<div *ngIf="contactForm.get('email')?.hasError('email')">Invalid email format.</div>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" class="form-control" formControlName="password">
<div *ngIf="contactForm.get('password')?.errors && contactForm.get('password')?.touched" class="invalid-feedback">
<div *ngIf="contactForm.get('password')?.hasError('required')">Password is required.</div>
<div *ngIf="contactForm.get('password')?.hasError('minlength')">Password must be at least 6 characters long.</div>
<div *ngIf="contactForm.get('password')?.hasError('pattern')">Password must contain at least one uppercase letter, one lowercase letter, and one digit and special character.</div>
</div>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message:</label>
<textarea id="message" class="form-control" formControlName="message"></textarea>
<div *ngIf="contactForm.get('message')?.errors && contactForm.get('message')?.touched" class="invalid-feedback">
<div *ngIf="contactForm.get('message')?.hasError('required')">Message is required.</div>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">Submit</button>
</form>
</div>
</div>
</div>
Implement form submission logic in the component class
onSubmit() {
debugger;
if (this.contactForm.valid) {
console.log(this.contactForm.value); // You can send this data to your backend or perform other actions
this.contactForm.reset(); // Optional: Reset the form after submission
} else {
// Mark all form fields as touched to display validation errors
this.markFormGroupTouched(this.contactForm);
}
}
Working with Reactive Forms
Once the form is created, you can interact with it programmatically to access form controls, validate form inputs, and react to changes. Here are some common tasks when working with reactive forms:
const name = this.contactForm.get('name');
Add the Validators
private formBuilder() {
debugger;
this.contactForm = this.fb.group({
name: ['',Validators.required],
email: ['',[Validators.email,Validators.required]],
password: ['', [
Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{6,}$/), // Updated pattern
Validators.minLength(6),
Validators.required
]],
message: ['',Validators.required]
});
}
Reacting to Form Changes
You can subscribe to value changes or status changes of the form or individual form controls to react to changes in the form:
this.contactForm.valueChanges.subscribe(value => {
console.log('Form value changed:', value);
});