Angular v6：如何根据选择值禁用 formArray 的特定 formControl？

Question

我检查了许多 Stackblitz 示例以进行 formArray 验证，并根据其他 formControl 值禁用了 formControl，并尝试使用相同的方法，但在我的表单中它没有应用相同的东西。

qty formControl 的验证不起作用，如果用户从选择中选择一个活动值，则应启用 fromControl qty，否则默认情况下应禁用它，这也无法正常工作。

我错过了什么？

这是我的Stackblitz 演示。

我用于验证的参考。 https://stackblitz.com/edit/angular-validate-dynamic-formarray-formbuilder-pru78n?file=app/app.component.ts

HTML 组件

<div formArrayName="dataCollection">
    <div class="row" [formGroupName]="i" *ngFor="let element of data; let first = first; let i = index">
        <div *ngIf="!first">----------</div>
        <div formArrayName="sizes">
            <ng-container [formGroupName]="j" *ngFor="let qtys of data[0].sizes; let j = index">
                <div class="col">
                    <mat-form-field class="">
                            <input matInput type="text" formControlName="qty">
              <!-- <p *ngIf="element['controls'].qty?.errors?.required">Qty is required</p>
              <p *ngIf="element['controls'].qty?.errors?.pattern">Error pattern</p> -->
          </mat-form-field>
          <mat-form-field class="">
            <mat-select placeholder="Status"
              formControlName="statusMethod"
              (selectionChange)="onSelectionChanged($event)">
              <mat-option value="AC">Active</mat-option>
              <mat-option value="IN">Deactive</mat-option>
            </mat-select>
          </mat-form-field>
                </div>
            </ng-container>
        </div>
    </div>
</div>

TS 组件

onSelectionChanged({value}) {
  if (value === 'IN') {
    this.dataForm.get('dataCollection').get('qty').disable();
  } else {
    this.dataForm.get('dataCollection').get('qty').enable();
  }
}

Answer 1

在您的 onSelctionChanged() 方法中，没有对所选 FormArray 索引的引用。您必须从模板中传递它们，例如(selectionChanged)="onSelectionChanged(i, j)"。 现在您可以使用索引来访问嵌套 FormArrays 中的数据：

onSelectionChanged(i, j) {
  const control = (<FormArray>((<FormArray>this.dataForm.get("dataCollection")).at(i).get("sizes"))).at(j);
  if (control.get("statusMethod").value === "IN") {
    control.get("qty").disable();
  } else {
    control.get("qty").enable();
  }
}

有关访问 FormArray 中数据的更多信息，请参阅documentation 或此entry。

这是您的Stackblitz Demo 的更新版本。