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

Question

我已经检查了许多Stacklitz示例的formArray验证，并基于其他formControl值禁用了formControl，并尝试了相同的方法，但在我的表单中，它没有应用相同的东西。

qty窗体控件上的验证不起作用，如果用户从选择中选择了一个活动值，则应启用fromControlqty，否则应在默认情况下禁用它，这也不起作用。

我缺了什么？

这是我的Stacklitz演示。

我用于验证的参考资料。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中数据的更多信息，请参阅文档或本条目。

这是您的Stacklitz演示的更新版本。