如何基于FormArray控件值实现Angular响应式表单的条件格式化

解决方法 #

你已经在*ngFor循环中声明了下标变量i，直接把测试用的固定下标替换为动态的i即可。Angular响应式表单支持通过数组参数访问嵌套控件，正确写法如下：

<ion-col *ngIf="inventoryForm.get(['ident', i]).value < item.par" style="color: red">
  <strong>{{item.name}}</strong>
</ion-col>
<ion-col *ngIf="inventoryForm.get(['ident', i]).value >= item.par" style="color: green">
  <strong>{{item.name}}</strong>
</ion-col>

这里get()方法传入的数组参数第一层是formArray的名称ident，第二层是数组下标，比字符串拼接写法更清晰不易出错。

简化优化方案 #

你可以用[ngClass]绑定样式，不需要写两个冗余的*ngIf：

1. 先在样式文件中定义对应类：

.text-red {
  color: red;
}
.text-green {
  color: green;
}

2. 模板中直接绑定类即可：

<ion-col [ngClass]="{
  'text-red': inventoryForm.get(['ident', i]).value < item.par,
  'text-green': inventoryForm.get(['ident', i]).value >= item.par
}">
  <strong>{{item.name}}</strong>
</ion-col>

额外性能优化建议 #

可以在组件类中给formArray定义一个getter，避免模板中反复写长串访问路径：

get identArray() {
  return this.inventoryForm.get('ident') as FormArray;
}

之后模板中就可以简化写法：

*ngIf="identArray.at(i).value < item.par"

内容的提问来源于stack exchange，提问作者Paul Mullen