CODEWITHSUNDEEP
angularformscontrols
dnamyslak
dnamyslak

Reputation: 11

how to disable reactive forms control inside another formArray

How can I disable single control on fields which is inside this.form.get('groups').controls ? I can easily disabel whole group by writing this.form.get('groups').controls.disable(); but I want procisely disable only FIELDS group which is deeper ... based on its value '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, 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 - I am trying to disable this BOLDED ** input based on a flag = can_edit value ( boolean )

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

Upvotes: 1

Views: 697

Answers (2)

dnamyslak
dnamyslak

Reputation: 11

I have found the solution myself.

I need to iterate onver arr inside fields controls creation and disable it.

Here is the solution if anyone has similar problem:

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

Upvotes: 0

Oleksii Pavlenko
Oleksii Pavlenko

Reputation: 1333

You can go deeper on any level with

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

Upvotes: 1

Related Questions