Angular指令中能否访问FormBuilder Validators？

Absolutely! You don't have to depend on HTML attributes to fetch validation rules like required, minLength, or maxLength—Angular's reactive forms API lets you access these directly from the FormControl instances defined in your component. This approach is far more reliable because it uses a single source of truth (your TypeScript form configuration) instead of syncing with HTML attributes.

Step 1: Inject FormGroupDirective in Your Directive #

First, you'll need to inject FormGroupDirective into your custom directive. This gives you access to the parent FormGroup tied to your form element.

Step 2: Modify Your Directive Logic #

Instead of iterating over DOM elements, you'll traverse the FormGroup's controls to extract validator properties. Here's the updated customFormValidation.directive.ts:

import { Directive, HostListener } from '@angular/core';
import { FormGroupDirective, AbstractControl, Validators } from '@angular/forms';

@Directive({
  selector: '[customFormValidation]'
})
export class CustomFormValidationDirective {
  isSubmitted = false;

  constructor(private formGroupDirective: FormGroupDirective) {}

  @HostListener("submit", ["$event"]) onSubmit(e: Event) {
    e.preventDefault();
    this.isSubmitted = true;

    // Get the root FormGroup from the directive
    const form = this.formGroupDirective.form;

    // Iterate over all form controls
    Object.keys(form.controls).forEach(controlName => {
      const control = form.get(controlName);
      if (!control) return;

      // Check if the control has the required validator
      const isRequired = control.hasValidator(Validators.required);
      
      // Extract minLength and maxLength values
      const minLength = this.extractValidatorParam(control, 'minLength');
      const maxLength = this.extractValidatorParam(control, 'maxLength');

      // Log the values (replace with your custom logic)
      console.log(`Control: ${controlName}`);
      console.log(`Is Required: ${isRequired}`);
      console.log(`Min Length: ${minLength ?? 'Not set'}`);
      console.log(`Max Length: ${maxLength ?? 'Not set'}`);
    });
  }

  // Helper function to extract validator parameters
  private extractValidatorParam(control: AbstractControl, validatorKey: string): number | null {
    const validatorFn = control.validator;
    if (!validatorFn) return null;

    // Trigger the validator with an empty control to get error metadata
    const validationErrors = validatorFn({} as AbstractControl);
    if (validationErrors && validationErrors[validatorKey]) {
      return validationErrors[validatorKey].requiredLength;
    }
    return null;
  }
}

Key Explanations: #

• FormGroupDirective: This service connects your directive to the reactive form's FormGroup, so you don't have to query the DOM for form controls.
• hasValidator(): Angular 8+ provides this method to check if a specific validator (like Validators.required) is attached to a control—no need to parse error objects if validation hasn't been triggered yet.
• extractValidatorParam(): This helper runs the validator function against a dummy control to retrieve the configured parameter (e.g., 5 for Validators.minLength(5)). The error object returned by the validator includes the requiredLength property we need.

Why This Is Better Than HTML Attributes: #

• Single Source of Truth: You only define validation rules once in your TypeScript code, avoiding mismatches between HTML attributes and your form configuration.
• Dynamic Updates: If you modify validation rules programmatically (e.g., change minLength based on user input), your directive will automatically pick up the new values without updating HTML.

Notes: #

• If your form includes nested FormGroup or FormArray instances, you'll need to add recursive logic to traverse those nested controls.
• For custom validators, you can extend the extractValidatorParam method to look for your own validator-specific error properties.

内容的提问来源于stack exchange，提问作者ppanayiotou