Forms Implementation Skill

Quick Start

Template-Driven Forms

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-contact',
  template: `
    <form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
      <input
        [(ngModel)]="model.name"
        name="name"
        required
        minlength="3"
      />
      <input
        [(ngModel)]="model.email"
        name="email"
        email
      />
      <button [disabled]="!contactForm.valid">Submit</button>
    </form>
  `
})
export class ContactComponent {
  model = { name: '', email: '' };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted:', form.value);
    }
  }
}

Reactive Forms

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

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name" />
      <input formControlName="email" type="email" />
      <input formControlName="password" type="password" />
      <button [disabled]="form.invalid">Register</button>
    </form>
  `
})
export class UserFormComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

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

Form Controls

FormControl

// Create standalone control
const nameControl = new FormControl('', Validators.required);

// Get value
nameControl.value

// Set value
nameControl.setValue('John');
nameControl.patchValue({ name: 'John' });

// Check validity
nameControl.valid
nameControl.invalid
nameControl.errors

// Listen to changes
nameControl.valueChanges.subscribe(value => {
  console.log('Changed:', value);
});

FormGroup

const form = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    zip: new FormControl('')
  })
});

// Access nested controls
form.get('address.street')?.setValue('123 Main St');

// Update multiple values
form.patchValue({
  name: 'John',
  email: 'john@example.com'
});

FormArray

const form = new FormGroup({
  name: new FormControl(''),
  emails: new FormArray([
    new FormControl(''),
    new FormControl('')
  ])
});

// Dynamic form array
const emailsArray = form.get('emails') as FormArray;

// Add control
emailsArray.push(new FormControl(''));

// Remove control
emailsArray.removeAt(0);

// Iterate
emailsArray.controls.forEach((control, index) => {
  // ...
});

Validation

Built-in Validators

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

new FormControl('', [
  Validators.required,
  Validators.minLength(3),
  Validators.maxLength(50),
  Validators.pattern(/^[a-z]/i),
  Validators.email,
  Validators.min(0),
  Validators.max(100)
])

Custom Validators

// Simple validator
function noSpacesValidator(control: AbstractControl): ValidationErrors | null {
  if (control.value && control.value.includes(' ')) {
    return { hasSpaces: true };
  }
  return null;
}

// Cross-field validator
function passwordMatchValidator(group: FormGroup): ValidationErrors | null {
  const password = group.get('password')?.value;
  const confirm = group.get('confirmPassword')?.value;

  return password === confirm ? null : { passwordMismatch: true };
}

// Usage
const form = new FormGroup({
  username: new FormControl('', noSpacesValidator),
  password: new FormControl(''),
  confirmPassword: new FormControl('')
}, passwordMatchValidator);

Async Validators

function emailAvailableValidator(service: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    if (!control.value) {
      return of(null);
    }

    return service.checkEmailAvailable(control.value).pipe(
      map(available => available ? null : { emailTaken: true }),
      debounceTime(300),
      first()
    );
  };
}

// Usage
new FormControl('', {
  validators: Validators.required,
  asyncValidators: emailAvailableValidator(userService),
  updateOn: 'blur'
});

Form State

const control = form.get('email')!;

// Pristine/Dirty
control.pristine  // Not modified by user
control.dirty     // Modified by user

// Touched/Untouched
control.untouched // Never focused
control.touched   // Focused at least once

// Valid/Invalid
control.valid
control.invalid
control.errors
control.pending   // Async validation in progress

// Status
control.status // 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'

// Value
control.value
control.getRawValue() // Include disabled controls

Form Display

Showing Errors

<div *ngIf="form.get('email')?.hasError('required')">
  Email is required
</div>

<div *ngIf="form.get('email')?.hasError('email')">
  Invalid email format
</div>

<div *ngIf="form.get('email')?.hasError('emailTaken')">
  Email already in use
</div>

Dynamic Forms

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

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

  addItem() {
    this.items.push(new FormControl('', Validators.required));
  }

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

Advanced Patterns

FormBuilder Groups

this.form = this.fb.group({
  basicInfo: this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  }),
  address: this.fb.group({
    street: [''],
    city: [''],
    zip: ['']
  }),
  preferences: this.fb.array([])
});

Directives for Template Forms

<form #form="ngForm">
  <input
    [(ngModel)]="user.name"
    name="name"
    required
    minlength="3"
    #nameField="ngModelGroup"
  />

  <div *ngIf="nameField.invalid && nameField.touched">
    <p *ngIf="nameField.errors?.['required']">Required</p>
    <p *ngIf="nameField.errors?.['minlength']">Min length 3</p>
  </div>
</form>

Testing Forms

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserFormComponent],
      imports: [ReactiveFormsModule]
    }).compileComponents();

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

  it('should submit valid form', () => {
    component.form.patchValue({
      name: 'John',
      email: 'john@example.com'
    });

    expect(component.form.valid).toBe(true);
  });

  it('should show error on invalid email', () => {
    component.form.get('email')?.setValue('invalid');
    expect(component.form.get('email')?.hasError('email')).toBe(true);
  });
});

Best Practices

1. Reactive Forms for Complex: Use for validation, computed fields
2. Template Forms for Simple: Use for simple, data-binding heavy forms
3. Always validate: Server and client validation
4. Disable submit until valid: Better UX
5. Show errors appropriately: After touched/dirty
6. Handle async validation: Debounce, cancel on unsubscribe
7. Test forms thoroughly: Validation, submission, edge cases

Resources

• Angular Forms Guide
• Reactive Forms
• Form Validation