modus-angular-forms-validation

Forms and Validation Rules

Comprehensive guide for implementing forms and validation in Angular applications with Modus Web Components.

Core Principles

ALWAYS Use Reactive Forms

import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
})
export class MyFormComponent {
  private readonly fb = new FormBuilder();

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

CRITICAL: Track Touched State Manually

Modus Web Components don't automatically track Angular form touched state. You must manually track which fields have been touched.

export class FormComponent {
  readonly touchedFields = signal<Set<string>>(new Set());

  handleFieldChange(event: InputEvent, fieldName: string): void {
    const target = event.target as HTMLInputElement;
    const control = this.form.controls[fieldName];
    control.setValue(target.value);
    this.markFieldTouched(fieldName);
  }

  handleFieldBlur(fieldName: string): void {
    this.markFieldTouched(fieldName);
  }

  private markFieldTouched(fieldName: string): void {
    this.touchedFields.update((fields) => {
      const newFields = new Set(fields);
      newFields.add(fieldName);
      return newFields;
    });
  }
}

Validation Feedback Pattern

Use Computed Signals for Validation Feedback

readonly emailFeedback = computed<IInputFeedbackProp | undefined>(() => {
  const control = this.form.controls.email;
  const isTouched = this.touchedFields().has('email');

  if (!isTouched || !control.errors) return undefined;

  if (control.errors['required']) {
    return { level: 'error', message: 'Email address is required.' };
  }
  if (control.errors['email']) {
    return { level: 'error', message: 'Please enter a valid email address.' };
  }
  return undefined;
});

Connecting Modus Components to Forms