Angular指令触发表单验证：无需传入Control调用updateValueAndValidity

Great question! The core issue here is that when you programmatically update the input's value via DOM manipulation (or jQuery in your case), Angular's form control doesn't automatically pick up on the change for validation purposes. While you're correctly calling _onChange to update the form value, that only syncs the value—not the validation state.

Here's a clean solution that meets your requirements: we'll trigger a native input event after updating the value, which makes Angular treat the change like a user's manual input, automatically triggering validation without needing to pass a Control reference or call updateValueAndValidity directly.

First, let's refactor your directive to use native DOM operations (ditching jQuery for better Angular compatibility) and add the event trigger:

import { Directive, ElementRef, OnInit, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[price]',
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PriceDirective), multi: true }
  ]
})
export class PriceDirective implements ControlValueAccessor {
  constructor(private el: ElementRef) { }

  // ControlValueAccessor interface
  private _onChange = (_: any) => { };
  private _onTouched = () => { };

  @HostListener('blur', ['$event']) onBlur(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    const rawValue = inputElement.value.trim();
    
    if (rawValue) {
      const formattedValue = Number(rawValue).toFixed(2);
      inputElement.value = formattedValue;
      // Trigger native input event to notify Angular of value change
      inputElement.dispatchEvent(new Event('input'));
      this._onChange(parseFloat(formattedValue));
    } else {
      inputElement.value = '';
      inputElement.dispatchEvent(new Event('input'));
      this._onChange(null);
    }
    
    this._onTouched();
  }

  writeValue(value: any): void {
    const inputElement = this.el.nativeElement as HTMLInputElement;
    if (value != null && value !== '') {
      inputElement.value = Number(value).toFixed(2);
      // Trigger input event on initialization/form value updates too
      inputElement.dispatchEvent(new Event('input'));
    } else {
      inputElement.value = '';
      inputElement.dispatchEvent(new Event('input'));
    }
  }

  registerOnChange(fn: (_: any) => void): void {
    this._onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouched = fn;
  }
}

Key changes explained: #

1. Native DOM operations: Replaced jQuery's $(this.el.nativeElement).val() with direct access to inputElement.value—this removes unnecessary dependencies and aligns with Angular's native patterns.
2. Trigger input event: After updating the input's value (both on blur and during initialization via writeValue), we dispatch a native input event. This mimics user input, prompting Angular's form control to re-run validators automatically.
3. Robust value handling: Added trimming for input values to avoid whitespace-related issues, and ensured null/empty values are handled consistently across the directive.

Why this works: #

Angular's reactive forms rely on native DOM events (like input or change) to sync values and re-evaluate validation rules. By manually triggering the input event, we leverage this built-in behavior—no need to directly interact with the form control's API or pass external references into the directive.

This solution checks all your boxes:

• No need to pass a Control reference into the directive
• No explicit calls to updateValueAndValidity
• Validation triggers automatically from within the directive

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