Angular：指令中的 updateValueAndValidity

我有一个指令，如果输入值是整数，则在模糊时附加小数。下面是实现。

import { Directive, ElementRef, Input, 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 = (_) => { };
  private _onTouched = () => { };

  @HostListener('blur', ['$event'])
  input(event) {
    !!event.target.value ? $(this.el.nativeElement).val(Number(event.target.value).toFixed(2)) : $(this.el.nativeElement).val(null);

    this._onChange(parseFloat(event.target.value));
    this._onTouched();
  }
  writeValue(value: any): void {
    !!value ? $(this.el.nativeElement).val(Number(value).toFixed(2)) : $(this.el.nativeElement).val(null);
  }

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

}

事情按预期进行。

但是，由于当以编程方式更改值时，Angular 不会触发验证，因此具有此指令的文本框不会被验证。

在这种情况下，除了通过传递之外，如何通过其他方式启用验证control引用作为指令的输入并调用updateValueAndValidity就可以了，或者打电话updateValueAndValidity on input or blur.

如果有人建议我一种从指令本身触发验证的方法，那就太好了。

我用这种方式解决了同样的问题。 这是我的第一个方法。

  update() {

    // ...

    const el = this.el.nativeElement;
    const reg = new RegExp(this.textMaskConfig.replacement);

    el.value = this.prevStr.replace(reg, this.currentChar);

    // ...

  }

但它不会触发验证事件。所以我得到了NgControl组件和使用setValue() method.

  constructor(private el: ElementRef, private ctrl: NgControl) {   
  }

  @HostListener('keydown', ['$event']) onKeyDownHandler(e) {
    this.ctrl.control.setValue(value);
  }