基于控件值的 Reactive Form Control 的条件格式化

Question

这是一个关于在使用 FormBuilder 和 formControl 数组构建 formControl 的应用程序中基于 formControl 格式化文本的问题。

它需要访问 formControl 的当前值并根据该 formControl 值更改另一个元素的格式。

我在一个应用程序中有一个页面，它是 Ionic/Angular/Reactive 中内置的库存跟踪表单。

内容来自数据库订阅。

您可以在表格中看到，当 Should Have 小于 Actually Have 时，项目的格式从红色变为绿色。

此格式是在模板文件中使用 *ngIf 设置的（参见箭头 <------）：

  <form [formGroup]="inventoryForm" (ngSubmit)="onSubmit()">
    <div formArrayName="ident">
      <ion-item *ngFor="let item of inventoryElements; let i = index;">
        <ion-grid>
          <ion-row>
            <ion-col *ngIf="item.current < item.par" style="color: red">
              <strong>{{item.name}}</strong></ion-col           <----------
            >
            <ion-col *ngIf="item.current >= item.par" style="color: green"
              ><strong>{{item.name}}</strong></ion-col          <----------
            >
            <ion-col>{{item.par}} {{item.units}}</ion-col>
            <ion-col>
              <input size="1"
                     style="text-align: right;"
                     id="ident-{{ i }}"
                     type="text"
                     [formControlName]="i" />
              {{item.units}}
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </div>
  </form>

（注意：我可能应该将两个 *ngIf 更新为 *ngIf-else-template，但这不是这里的问题。）

当然，颜色是在加载表单时设置的。如果用户更新 Actually Have，颜色不会改变。 让颜色随着 formControl 值的变化而变化是这里的问题。

表单控件数组内置ngOnInit():

  ngOnInit() {
    this.inventoryCollection = this.afs.collection('inventory', (ref) => {
      this.query = ref;
      this.query = this.query.orderBy('category');
      return this.query;
    });

    this.inventoryInfo = this.inventoryCollection.snapshotChanges();

    this.inventoryInfo.subscribe((actionArray) => {

      // this map takes the firestore document name and makes it the ID
      this.inventoryElements = actionArray.map((item) => ({
        id: item.payload.doc.id,
        ...item.payload.doc.data(),
        expanded: false,
      }));
      //======================= Here is where the control array is built ==================
      this.ident.clear();
      actionArray.forEach(item => {
        this.ident.push(this.fb.control(item.payload.doc.data().current));
      });
      //==========================================================
    });

  }

（注意：我确信我的清除数组并在订阅发出新值时重建它效率不高。很高兴在那里提出建议，但这不是核心问题。）

我曾尝试使用 formControl.get() 函数更改项目颜色的 *ngIf() 但没有成功。但我无法获得正确的语法。这是我的尝试：

<ion-col *ngIf="inventoryForm.get('0').value < item.par" style="color: red">

'0' 只是为了在我进行故障排除时获取一个值。显然，当我们遍历 inventoryElements.

时，这会发生变化

** 问题：为了在 *ngIf() 中进行比较，访问 formArray 中控件值的正确方法是什么？ **

Answer 1

@Eliseo 的答案是正确的。这个概念是将文本的 [style.color] 绑定到比较。特别注意参数前的+，使字符串变成可以比较的数字

基于控件值的 Reactive Form Control 的条件格式化

Conditional formatting of Reactive Form Control based on control value

formbuilder

ionic-framework

reactive

angular