Angular ngFor循环内FormControl调用setErrors({backend:true})不生效问题

核心原因排查 #

• mat-error 默认显示规则限制：生效的descriptionFormControl主动调用了markAsTouched()，不生效的amountFormControl/eurosFormControl/centsFormControl未标记为 touched 状态，Angular Material 默认不会展示未交互控件的错误样式。
• FormControl 与 ngModel 混用冲突：同时使用[formControl]和[(ngModel)]双向绑定，Angular 响应式表单与模板驱动表单混用会导致值更新时覆盖手动设置的errors属性。
• ngFor 无 trackBy 导致组件重绘：create.component.html中*ngFor循环渲染app-product时未指定trackBy函数，当products数组变更时会销毁重建所有子组件，此前设置的错误状态会被重置。
• 错误覆盖问题：直接调用setErrors({backend: true})会覆盖控件已有的验证错误，建议合并原有错误避免冲突。

修复步骤 #

1. 给不生效的三个控件添加markAsTouched()调用，同时合并原有错误
   修改product.component.ts中订阅回调逻辑：

// 价格错误回调
if(err) {
  this.eurosFormControl.markAsTouched();
  this.centsFormControl.markAsTouched();
  this.eurosFormControl.setErrors({ ...this.eurosFormControl.errors, backend: true });
  this.centsFormControl.setErrors({ ...this.centsFormControl.errors, backend: true });
  this.chaschan.markForCheck();
}
// 数量错误回调
if (res) {
  this.amountFormControl.markAsTouched();
  this.amountFormControl.setErrors({ ...this.amountFormControl.errors, backend: true })
  this.chaschan.markForCheck();
}

2. 移除所有控件的[(ngModel)]绑定，统一使用响应式表单API取值赋值
   删除html中[(ngModel)]="euros"、[(ngModel)]="cents"、[(ngModel)]="amount"、[(ngModel)]="description"等绑定，取值直接调用this.eurosFormControl.value，赋值调用this.eurosFormControl.setValue(xxx)即可。
3. 给*ngFor添加trackBy函数，避免不必要的组件重绘
   修改create.component.html的循环逻辑：

<app-product  
  *ngFor="let product of (products | async); let i = index; trackBy: trackByProductId" 
  [index]="i" 
  [product]="product"
></app-product>

在create.component.ts中添加trackBy函数：

trackByProductId(index: number, product: any) {
  // 优先用product的业务唯一标识作为key，无唯一字段可暂时用index
  return product.id ?? index;
}

内容的提问来源于stack exchange，提问作者Noah Bergh