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

如何解决如何禁用另一个formArray中的反应式表单控件

如何禁用this.form.get（'groups'）。controls内部的单个控件？ 我可以通过编写this.form.get（'groups'）。controls.disable（）;轻松取消整个群组 但我只想禁用更深的FIELDS组... 根据其值'fields.can_edit'

component.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,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-我正尝试根据标志= can_edit值（布尔值）禁用此BOLDED **输入

 <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>

解决方法

您可以通过

在任何级别上更深入

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

,

我自己找到了解决方法。

我需要在字段控件创建内迭代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;
  }