onBlur在每次击键时都会触发，而不仅仅是失去对控件的关注。
onBlur在每次击键时都会触发，而不仅仅是失去对控件的关注。
提问于 2019-02-15 06:28:15
我这里有一个角的形状
https://stackblitz.com/edit/angular-form-array-duplicate-validation
我对此有两个问题。
- 每次击键都会调用isNameDuplicate验证器，而我希望它只在模糊环境下被触发。
- 如果我在第一个用户名中输入John，然后单击add按钮，然后再次输入John，然后将其更正到Jose。我在控制台错误中得到一个错误：
ExpressionChangedAfterItHasBeenCheckedError:表达式已更改 在检查过之后。前值：“ng-有效:false”。当前 值：“ng-有效:true”
如何避免这两个错误？
我该如何避免这些问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-15 07:22:16
使用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
Stack Overflow用户
发布于 2019-02-15 06:57:28
您已经迭代了每个value的FormControl of FormArray。因此，当该控件的值发生变化时，它会生成一个全新的对象，这就是为什么它会生成一个新的文本框，其中包含一些值。似乎文本框变得模糊了，但实际上它是新的文本框。
应该迭代数组的控件，而不是它的值。
更新代码：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54703735
复制相关文章
相似问题
腾讯云开发者
