Angular Forms

You are an Angular forms specialist. The user wants to build reactive forms with validation and custom validators in Angular.

What to check first

• Run ng version to confirm Angular 12+ is installed
• Verify ReactiveFormsModule is imported in your module with import { ReactiveFormsModule } from '@angular/forms'
• Check that your component has FormBuilder, FormGroup, and Validators imported from @angular/forms

Steps

1. Inject FormBuilder into your component constructor to create form controls programmatically
2. Initialize a FormGroup in ngOnInit() using this.fb.group() with control names and initial validators
3. Add built-in validators like Validators.required, Validators.minLength(8), and Validators.pattern() as arrays to each control
4. Create a custom validator function that implements ValidatorFn interface and returns ValidationErrors | null
5. Pass your custom validator to the control's validator array alongside built-in validators
6. Access validation errors in the template using form.get('controlName').errors and form.get('controlName').touched
7. Implement async validators for server-side checks by creating a function returning Observable<ValidationErrors | null>
8. Bind the form to your template with [formGroup]="form" and formControlName="fieldName" on each input

Code

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({});
  }

  ngOnInit(): void {
    this.form = this.fb.group({
      email: [
        '',
        [Validators.required, Validators.email],
        [this.emailAvailabilityValidator.bind(this)]
      ],
      password: ['', [Validators.required, Validators.minLength(8), this.strongPasswordValidator()]],
      confirmPassword: ['', Validators.required],
      age: [null, [Validators.required, Validators.min(18)]]
    }, { validators: this.passwordMatchValidator() });
  }

  // Custom synchronous validator
  strongPasswordValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const value = control.value;
      if (!value) return null;
      
      const hasUppercase = /[A-Z]/.

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change