Form Extraction Skill

Extract and analyze Angular Reactive Forms from source code for migration comparison and validation.

Quick Commands

Extract Form Controls

# From HTML - formControlName
grep -oE 'formControlName="[^"]+"' {path}/**/*.html | sort -u

# From HTML - formGroupName
grep -oE 'formGroupName="[^"]+"' {path}/**/*.html | sort -u

# From TypeScript - form definitions
grep -E '(this\.fb\.group|this\.#fb\.group|this\.fb\.nonNullable\.group|new FormGroup|new UntypedFormGroup)' {path}/**/*.ts

Extract Validators

# Angular Validators (old)
grep -oE 'Validators\.(required|email|minLength|maxLength|min|max|pattern|nullValidator)(\([^)]*\))?' {path}/**/*.ts | sort -u

# OneValidators (new)
grep -oE 'OneValidators\.[a-zA-Z]+(\([^)]*\))?' {path}/**/*.ts | sort -u

# Custom validators
grep -oE '#?[a-zA-Z]+Validator\b' {path}/**/*.ts | sort -u

Form Definition Patterns

| Pattern | Example | | ------- | ------- | | FormBuilder | this.fb.group({ ... }) | | Private FB | this.#fb.group({ ... }) | | NonNullable | this.fb.nonNullable.group({ ... }) | | Direct | new FormGroup({ ... }) | | Untyped | new UntypedFormGroup({ ... }) |

Validator Patterns

| Pattern | Example | | ------- | ------- | | Array syntax | controlName: ['', [Validators.required]] | | Object syntax | controlName: this.fb.control('', { validators: [...] }) | | Group-level | this.fb.group({...}, { validators: [...] }) | | Async | controlName: ['', [], [asyncValidator]] |

Validator Mapping (Old → New)

| Old (Validators) | New (OneValidators) | | ---------------- | ------------------- | | Validators.required | OneValidators.required | | Validators.email | OneValidators.email | | Validators.minLength(n) | OneValidators.minLength(n) | | Validators.maxLength(n) | OneValidators.maxLength(n) | | Validators.min(n) | OneValidators.range(min, max) | | Validators.max(n) | OneValidators.range(min, max) | | Validators.pattern(x) | OneValidators.pattern(x) |

Error Display Patterns

Validators with Built-in Messages (use oneUiFormError directly)

These validators have i18n messages built-in, use simple pattern:

<mat-error oneUiFormError="fieldName"></mat-error>

| Validator | Built-in Message Key | | --------- | -------------------- | | required | validators.required | | minLength | validators.require_min_length | | maxLength | validators.invalid_max_length | | range | validators.invalid_range | | rangeLength | validators.invalid_range | | email | validators.invalid_email |

All Other Validators (MUST use @if/@else)

All validators NOT in the list above need explicit error handling with custom messages:

@if (ctrl.hasError('pattern')) {
  <mat-error>{{ t('validators.your_custom_pattern_message') }}</mat-error>
} @else if (ctrl.hasError('duplicate')) {
  <mat-error>{{ t('validators.duplicate_xxx') }}</mat-error>
} @else {
  <mat-error oneUiFormError="fieldName"></mat-error>
}

| Validator | Reason | | --------- | ------ | | pattern | Generic message validators.invalid, need specific message | | duplicate | Default validators.duplicate, often need context-specific message | | Custom validators | No built-in message | | Any other validator | Not in the 6 basic validators list |

References

• Detailed patterns: rules/tools/forms/patterns.md