代码之家 › 专栏 › 技术社区 › Adrian Brand

当比较某个值时,如何触发角度验证指令进行更新?

angular

0

Adrian Brand · 技术社区 · 7 年前

我遇到的问题是,当与之比较的属性发生更改时,不会触发窗体验证,并且与该属性比较的窗体字段不会更改有效性。

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

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

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

3 回复 | 直到 7 年前

1

4

Adrian Brand 7 年前

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

onChange: () => void;

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

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

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

2

3

Adrian Brand 7 年前

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

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

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

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

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

这是一场闪电战 https://stackblitz.com/edit/angular-9fnsmz

3

2

Powkachu Chandrahasa Rai 7 年前

我曾经 this 文章试图找到解决办法。我在重复它的一些句子。

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

reverse .

<input name="other" [(ngModel)]="other" notEqual="value" reverse="true">

当倒车时假或 未设置 ,我们将执行notEqual验证。
是的 ,我们仍将执行notEqual,但不是将错误添加到当前控件,而是将错误添加到目标控件。

更新指令以使用此新属性:

...
import { Attribute } from '@angular/core';

constructor(
    @Attribute('notEqual') public notEqual: string,
    @Attribute('reverse') public reverse: string
  ) {}

private get isReverse()
{
  if (!this.reverse) return false;
    return this.reverse === 'true' ? true: false;
}

validate(c: AbstractControl): { [key: string]: any }
{
    // self value
    let v = c.value;

    // control value
    let e = c.root.get(this.notEqual);

    // value not equal
    if (e && v === e.value && !this.isReverse) {
        return {
          notEqual: false
        }
    }

    // value equal and reverse
    if (e && v !== e.value && this.isReverse) {
        if (e.errors !== null)
          delete e.errors['notEqual'];
        if (e.errors !== null && !Object.keys(e.errors).length)
          e.setErrors(null);
    }

    // value not equal and reverse
    if (e && v === e.value && this.isReverse) {
        e.setErrors({ notEqual: false });
    }

    return null;
}

要使此指令起作用,请将输入放入相同的 <form> 标签。最后,html文件将如下所示:

<form>
  Value: <input name="value" [(ngModel)]="value" notEqual="other"><br>
  Other: <input name="other" [(ngModel)]="other" notEqual="value" reverse="true">
</form>

Here