如何触发Angular验证指令，以便在与之比较的值发生变化时进行更新？

Question

我构建了一些自定义表单验证指令，用于将表单域与其他属性进行比较。当您更改表单域的值时，它们工作得很好，验证会触发并更新表单域的有效性。

我遇到的问题是，当我比较的属性更改表单验证时，表单验证不会被触发，与属性比较的表单域也不会更改有效性。

我在这里创建了一个stackblitz示例。

https://stackblitz.com/edit/angular-t7h2ok

当您更改第一个字段的值时，如果它与其他字段相同则无效，否则有效。问题是，当我更改其他字段时，我希望确保在更改其他属性时更新第一个表单域的有效性。

Answer 1

对于任何可能感兴趣的人来说，一个更简洁的解决方案是在验证器中实现OnChanges并添加以下代码。

onChange: () => void;

ngOnChanges(changes: SimpleChanges): void {
    if ('theNameOfYourPropertyToWatch' in changes)) {
        if (this.onChange) this.onChange();
    }
}

registerOnValidatorChange(fn: () => void): void {
    this.onChange = fn;
}

我已经为我的验证器实现了一个ValidatorBase类来实现这一点。这是一场堆栈闪电战。

https://stackblitz.com/edit/angular-cfexiy

Answer 2

为任何可能感兴趣的人回答我自己的问题。

虽然我在其他地方确实使用了Powkachu的答案，但我以前读过那篇文章，但我在这个实例中的场景要求我使用box语法将验证属性绑定到属性，并且在这个实例中我不能使用属性来表示控件名称的字符串。

我在一个视图变量中引用了目标输入的ngModel

<input name="value" [(ngModel)]="value" [notEqual]="other" #valueModel="ngModel">

现在可以通过调用控件的updateValueAndValidity方法来触发验证。

<input name="other" [(ngModel)]="other" (change)="valueModel.control.updateValueAndValidity()">

这是一个stackblitz https://stackblitz.com/edit/angular-9fnsmz