10 Angular Reactive Forms Interview Questions and Answers

Angular Reactive Forms are a powerful feature in Angular, providing a model-driven approach to handling form inputs. This method offers enhanced scalability, testability, and flexibility compared to template-driven forms. By leveraging reactive forms, developers can create complex forms with dynamic validation, asynchronous data handling, and robust error management, making it an essential skill for modern web development.

This article presents a curated selection of interview questions focused on Angular Reactive Forms. Reviewing these questions will help you deepen your understanding of the topic, demonstrate your expertise, and confidently tackle technical interviews.

Angular Reactive Forms Interview Questions and Answers

1. Create a simple reactive form with fields for name, email, and password.

To create a simple reactive form in Angular with fields for name, email, and password, follow these steps:

1. Import the necessary modules from Angular’s forms package.
2. Initialize the form in the component class.
3. Bind the form to the template.

Example:

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
    // other imports
  ],
  // other configurations
})
export class AppModule { }

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  myForm: FormGroup;

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

  onSubmit() {
    if (this.myForm.valid) {
      console.log(this.myForm.value);
    }
  }
}

<!-- app.component.html -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input id="name" formControlName="name">
  <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
    Name is required.
  </div>

  <label for="email">Email:</label>
  <input id="email" formControlName="email">
  <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
    Enter a valid email.
  </div>

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

  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

2. Add validation to the email field in a reactive form. Provide a code snippet.

To add validation to the email field in a reactive form, use Angular’s built-in validators. The Validators class provides a set of built-in validators, including Validators.email for email validation.

Example:

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

@Component({
  selector: 'app-email-form',
  template: `
    <form [formGroup]="emailForm">
      <label for="email">Email:</label>
      <input id="email" formControlName="email">
      <div *ngIf="emailForm.get('email').invalid && emailForm.get('email').touched">
        Invalid email address
      </div>
    </form>
  `
})
export class EmailFormComponent {
  emailForm: FormGroup;

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

3. Dynamically add and remove form controls in a reactive form. Provide an example.

In Angular Reactive Forms, you can dynamically add and remove form controls using FormArray, which is designed to handle an array of form controls.

Example:

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }

  get items() {
    return this.form.get('items') as FormArray;
  }

  addItem() {
    this.items.push(this.fb.control('', Validators.required));
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }
}

In the template, use *ngFor to iterate over the FormArray and provide buttons to add or remove items:

<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index">
      <input [formControlName]="i" placeholder="Enter item">
      <button type="button" (click)="removeItem(i)">Remove</button>
    </div>
  </div>
  <button type="button" (click)="addItem()">Add Item</button>
</form>

4. Implement nested FormGroups within a reactive form. Provide a code example.

Nested FormGroups allow you to logically group related form controls together, making it easier to manage complex forms.

Example:

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

@Component({
  selector: 'app-nested-form',
  template: `
    <form [formGroup]="form">
      <div formGroupName="address">
        <label>
          Street:
          <input formControlName="street">
        </label>
        <label>
          City:
          <input formControlName="city">
        </label>
      </div>
      <div formGroupName="contact">
        <label>
          Email:
          <input formControlName="email">
        </label>
        <label>
          Phone:
          <input formControlName="phone">
        </label>
      </div>
    </form>
  `
})
export class NestedFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      address: this.fb.group({
        street: [''],
        city: ['']
      }),
      contact: this.fb.group({
        email: [''],
        phone: ['']
      })
    });
  }
}

5. Use custom validators in a reactive form. Provide an example.

Custom validators encapsulate validation logic not covered by built-in validators, allowing for reusable validation functions.

Example:

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

// Custom validator function
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

To use this custom validator in a reactive form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { forbiddenNameValidator } from './forbidden-name.validator';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html'
})
export class ProfileEditorComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      username: ['', [Validators.required, forbiddenNameValidator(/admin/i)]]
    });
  }
}

6. Handle asynchronous validation in a reactive form. Provide a code example.

Asynchronous validation is used for processes like checking if a username is already taken, using the AsyncValidator interface and returning an observable.

Example:

import { AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

export class CustomValidators {
  static usernameTaken(http: HttpClient): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return http.get<{ taken: boolean }>(`/api/username-check?username=${control.value}`).pipe(
        map(response => (response.taken ? { usernameTaken: true } : null)),
        catchError(() => of(null))
      );
    };
  }
}

// Usage in a form group
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private fb: FormBuilder, private http: HttpClient) {}

ngOnInit() {
  this.form = this.fb.group({
    username: ['', [Validators.required], [CustomValidators.usernameTaken(this.http)]]
  });
}

7. Handle form arrays in a reactive form. Provide an example.

A FormArray manages an array of form controls, useful for dynamic forms where the number of controls can vary.

Example:

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input [formControlName]="i" placeholder="Item {{i + 1}}" />
          <button (click)="removeItem(i)">Remove</button>
        </div>
      </div>
      <button (click)="addItem()">Add Item</button>
    </form>
  `
})
export class DynamicFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      items: this.fb.array([this.createItem()])
    });
  }

  get items(): FormArray {
    return this.form.get('items') as FormArray;
  }

  createItem(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required]
    });
  }

  addItem(): void {
    this.items.push(this.createItem());
  }

  removeItem(index: number): void {
    this.items.removeAt(index);
  }
}

8. Use valueChanges observable in a reactive form. Provide a use case example.

The valueChanges observable allows you to listen for changes in the form’s value, useful for actions based on user input.

Example:

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

@Component({
  selector: 'app-example-form',
  template: `
    <form [formGroup]="exampleForm">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">
      <p *ngIf="nameLength">Name length: {{ nameLength }}</p>
    </form>
  `
})
export class ExampleFormComponent implements OnInit {
  exampleForm: FormGroup;
  nameLength: number;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.exampleForm = this.fb.group({
      name: ['']
    });

    this.exampleForm.get('name').valueChanges.subscribe(value => {
      this.nameLength = value.length;
    });
  }
}

9. Implement conditional validation in a reactive form. Provide a code example.

Conditional validation can be implemented by dynamically adding or removing validators based on conditions.

Example:

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

@Component({
  selector: 'app-conditional-validation',
  template: `
    <form [formGroup]="form">
      <label>
        <input type="checkbox" formControlName="subscribe" /> Subscribe to newsletter
      </label>
      <div *ngIf="form.get('subscribe').value">
        <label>
          Email:
          <input type="email" formControlName="email" />
        </label>
        <div *ngIf="form.get('email').invalid && form.get('email').touched">
          Email is required
        </div>
      </div>
    </form>
  `
})
export class ConditionalValidationComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      subscribe: [false],
      email: ['']
    });

    this.form.get('subscribe').valueChanges.subscribe((subscribe) => {
      const emailControl = this.form.get('email');
      if (subscribe) {
        emailControl.setValidators([Validators.required, Validators.email]);
      } else {
        emailControl.clearValidators();
      }
      emailControl.updateValueAndValidity();
    });
  }
}

10. Test a reactive form using Angular’s testing utilities.

Testing reactive forms in Angular ensures that the form behaves as expected, including validation and data binding. Angular provides testing utilities to create a test environment, simulate user interactions, and verify the form’s state and behavior.

Example:

import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule],
      declarations: [MyComponent],
      providers: [FormBuilder]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create a form with two controls', () => {
    expect(component.myForm.contains('name')).toBeTruthy();
    expect(component.myForm.contains('email')).toBeTruthy();
  });

  it('should make the name control required', () => {
    let control = component.myForm.get('name');
    control.setValue('');
    expect(control.valid).toBeFalsy();
  });

  it('should make the email control required', () => {
    let control = component.myForm.get('email');
    control.setValue('');
    expect(control.valid).toBeFalsy();
  });
});