Question

我在这里有一个Angular形式

https://stackblitz.com/edit/angular-form-array-duplicate-validation

我有两个问题。

每次击键都会调用isNameDuplicate验证程序而我希望仅在“模糊”上触发它。
如果我在第一个用户名中输入John，然后单击添加按钮然后我再次输入John，然后更正为Jose。我得到一个控制台错误

错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改
  经过检查后。先前的值：“ ng-valid：false”。当前
  值：“ ng-valid：true”

如何避免这两个错误？

任何想法如何避免这些问题。

Answer 1

您已遍历value中每个FormControl的{{1}}。因此，当该控件的值更改时，它会生成整个新对象，这就是为什么它会生成一个其中具有某些值的新文本框的原因。似乎文本框变得模糊了，但实际上是新的文本框。

您应该迭代数组的控件而不是数组的值。

更新的代码：HTML

FormArray

Answer 2

使用 trackBy

trackBy函数将索引和当前项目作为参数并需要返回此项的唯一标识符

component.html

<div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index;trackBy: cmpare;">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
          </ng-container>
 </div>

component.ts

cmpare(index) {
    return index;
}

派生示例：https://stackblitz.com/edit/angular-form-array-duplicate-validation-8mojks

onBlur在每次击键时触发，而不是仅仅失去对控件的关注

2 个答案: