Angular 响应式表单验证指令中的控件

Question

我在 Angular 响应式表单中输入了一个数字，我得到了一个限制小数位数的指令，并且工作正常，我希望实现自动更正作为该指令的一部分，这也是一种工作，但不是验证。

<input type="number" formControlName="TestPercentage" id="TestPercentage" max="100" step="0.25" numeric [decimals]="2"/>

ts 文件

 this.form.addControl(formConstants.markupPercentage, new FormControl('', [Validators.min(0), Validators.max(100)]);

我正在使用 https://gist.github.com/ahmeti/5ca97ec41f6a48ef699ee6606560d1f7 中的十进制数指令和我正在更改值的部分

if (Number(currentValue) > Number(this.el.nativeElement.max)) {
    this.el.nativeElement.value = parseFloat(this.el.nativeElement.max).toFixed(this.decimals);
    this.el.nativeElement.updateValueAndValidity();
  }

这个正在使值达到最大值但没有删除无效的 class/ 没有重新验证或者指令中分配的新值没有得到验证。

更改/更正元素值后如何触发验证？

Answer 1

我解决这个问题的方法是将抽象控制传递给指令并使用 setvalue 方法设置值，这解决了问题。

Angular 响应式表单验证指令中的控件

Angular Reactive forms Validate a control from directive

javascript

validation

angular

angular-reactive-forms