onBlur 在每次击键时触发，而不是在控件失去焦点时触发

Question

我这里有一个Angular表格

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

我有两个问题。

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

错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed
after it was checked. Previous value: 'ng-valid: false'. Current
value: 'ng-valid: true'

如何避免这两个错误？

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

Answer 1

您已经迭代了 FormArray 的每个 FormControl 的 value。因此，当该控件的值发生变化时，它会生成一个全新的对象，这就是为什么它会生成一个具有某些值的新文本框的原因。看起来文本框变模糊了，但实际上它是新文本框。

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

更新代码：HTML

    <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.controls; let i = index">
      <div [formGroupName]="i">
      {{form.controls.credentials.controls[i].value | json}} 
        <input type="text" placeholder="Username" formControlName="username">
        <input type="text" placeholder="Password" formControlName="password">
      </div>
    </div>

Answer 2

使用trackBy

The trackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item

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 在每次击键时触发，而不是在控件失去焦点时触发

onBlur fires on every keystroke instead of on just losing focus on the control

angular

angular-reactive-forms