Introduction to Reactive Forms

Angular provides two distinct approaches for handling forms: Template-driven forms and Reactive forms. In this blog, we will focus on Reactive Forms, which give you more control and flexibility over your forms.

Reactive Forms are modeled as an object structure in the component class, making it easier to manage the state and the validation of forms. They are built around the concept of FormControl, FormGroup, and FormArray.

Setting Up Reactive Forms

To get started with Reactive Forms, ensure that you've imported the ReactiveFormsModule in your Angular module:

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

@NgModule({
  declarations: [/* your components */],
  imports: [ReactiveFormsModule],
  bootstrap: [/* your main component */]
})
export class AppModule { }

Creating a Simple Form

Let’s create a simple login form using Reactive Forms.

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('Form Submitted!', this.loginForm.value);
    }
  }
}

In this component, we utilize FormBuilder to construct a reactive form. The loginForm contains two form controls, email and password, which are initialized with validators such as Validators.required, Validators.email, and Validators.minLength.

Template Code

Next, we need to create the associated template to display the form:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <label for="email">Email:</label>
  <input id="email" formControlName="email">
  <div *ngIf="loginForm.get('email').invalid && loginForm.get('email').touched">
    <small *ngIf="loginForm.get('email').errors.required">Email is required.</small>
    <small *ngIf="loginForm.get('email').errors.email">Please enter a valid email.</small>
  </div>

  <label for="password">Password:</label>
  <input id="password" type="password" formControlName="password">
  <div *ngIf="loginForm.get('password').invalid && loginForm.get('password').touched">
    <small *ngIf="loginForm.get('password').errors.required">Password is required.</small>
    <small *ngIf="loginForm.get('password').errors.minlength">Password must be at least 6 characters long.</small>
  </div>

  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>

In the template, we bind the form to the loginForm model through the formGroup directive. Each input is associated with its respective control using the formControlName directive. Validation messages are conditionally displayed based on the state of the form controls.

Advanced Form Validation

Custom Validators

While Angular provides built-in validators, you might encounter situations that require custom validation logic. Here's how to implement a custom validator.

Create a custom validator function:

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function passwordMatch(control: AbstractControl): ValidationErrors | null {
  const password = control.get('password').value;
  const confirmPassword = control.get('confirmPassword').value;
  return password === confirmPassword ? null : { passwordMismatch: true };
}

Now, integrate this validator into your form:

this.loginForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]],
  confirmPassword: ['', Validators.required]
}, { validators: passwordMatch });

Make sure to add the confirm password input field in your template as well:

<label for="confirmPassword">Confirm Password:</label>
<input id="confirmPassword" type="password" formControlName="confirmPassword">
<div *ngIf="loginForm.errors?.passwordMismatch && loginForm.get('confirmPassword').touched">
  <small>Passwords must match.</small>
</div>

Handling Form Arrays

In complex forms, you might need to work with dynamic form fields. FormArray is useful in these scenarios. Below is an example of a form allowing users to add multiple skills.

this.skillsForm = this.fb.group({
  skills: this.fb.array([])
});

get skills(): FormArray {
  return this.skillsForm.get('skills') as FormArray;
}

addSkill() {
  const skillGroup = this.fb.group({
    skillName: ['', Validators.required],
    experience: ['', Validators.required],
  });
  this.skills.push(skillGroup);
}

In the template, you loop through the skills array to render the dynamic input fields:

<div formArrayName="skills">
  <div *ngFor="let skill of skills.controls; let i = index" [formGroupName]="i">
    <input formControlName="skillName" placeholder="Skill Name">
    <input formControlName="experience" placeholder="Experience (years)">
  </div>
</div>
<button (click)="addSkill()">Add Skill</button>

Form State Management

Reactive Forms make managing the state of the form easy. You can track whether the form is valid, dirty, touched, etc. Additionally, you can subscribe to value changes:

this.loginForm.valueChanges.subscribe(value => {
  console.log(value);
});

This will log the form values in real-time, allowing for features such as conditional display or logic based on user input.

Conclusion

By harnessing the power of Angular's Reactive Forms, you can create complex, dynamic forms with a robust validation structure. From built-in validators to custom logic and dynamic fields, Angular provides the tools necessary to create an engaging user experience. Whether you're building simple forms or intricate multi-step forms, understanding Reactive Forms will greatly enhance your Angular applications.