如何在另一个 formArray 中禁用反应式表单控件答案

【问题标题】：how to disable reactive forms control inside another formArray如何在另一个 formArray 中禁用反应式表单控件
【发布时间】：2020-11-10 20:58:34
【问题描述】：

如何禁用 this.form.get('groups').controls 中的字段的单个控件？我可以通过编写 this.form.get('groups').controls.disable(); 轻松地禁用整个组。但我想只禁用更深的 FIELDS 组...... 基于其值'fields.can_edit'

组件.ts

this.form = this.fb.group({
      groups: this.fb.array([]),
      efficiency_net: production.efficiency_net,
      csc: [{value: production.csc, disabled: true}],
      standard_annual_production: [{value: production.standard_annual_production, disabled: true}],
      weight_older_cow: production.weight_older_cow,
      average_calving_interval: production.average_calving_interval,
      breed_of_cows_id: production.breed_of_cows_id,
    });

   
    this.setGroups(production.groups);
    
  }

  public setGroups(groups: any): void {
    const control = <FormArray>this.form.controls.groups;
    groups.data.forEach( group => {
      control.push(this.fb.group({
        fields: this.setFields(group.fields),
        group_name: group.group_name,
        id: group.id,
      }));
    });
  }

  public setFields(fields: any) {
    const arr = new FormArray([]);
    fields.data.forEach( field => {
      arr.push(**this.fb.group**(
        {
        id: field.id,
        name: field.name,
        value: field.value,
        can_edit: field.can_edit
      }));
    });

    return arr;
  }

html - 我正在尝试根据标志禁用此 BOLDED ** 输入 = can_edit 值（布尔值）

 <form aria-labelledby="title" [formGroup]="form" autocomplete="off" *ngIf="$production !== undefined">

    <nb-card>
      <nb-card-body>

        <div class="add-production-table-container">


          <table class="mat-table" formArrayName="groups">
            <tr class="mat-header-row">
             ...
            </tr>
            <tr class="mat-row" *ngFor="let productionGroups of form.get('groups').controls; let i = index" [formGroupName]="i">
              <td class="mat-cell" >  <input type="text" nbInput class="ghost-input" fieldSize="small" placeholder="" formControlName="group_name"> </td>

              <td class="mat-cell" *ngFor="let field of productionGroups.get('fields').controls; let j=index" formArrayName="fields">
                <span [formGroupName]="j">
                  **<input type="text" nbInput class="short-input" fieldSize="small" placeholder="" formControlName="value">**
                </span>

              </td>
            </tr>

【问题讨论】：

标签： angular forms controls

【解决方案1】：

你可以在任何层次上更深入

this.form.control.get('groups.fields.can_edit')

【讨论】：

【解决方案2】：

我自己找到了解决方案。

我需要在字段控件创建中迭代 onver arr 并禁用它。

如果有人遇到类似问题，这里是解决方案：

 public setFields(fields: any) {
    const arr = new FormArray([]);
    fields.data.forEach( field => {
      arr.push(this.fb.group(
        {
        id: field.id,
        name: field.name,
        value: field.value,
        can_edit: field.can_edit
      }));
    });
   
    arr.controls.forEach( data => {
      if ( data.value.can_edit === false ) {
        data.disable();
      }
    });

    return arr;
  }

【讨论】：