Unable to disable FormArray From Controller dynamically(Angular 5)

Question

What I want to do is when opening the page, values would be set into some FormArray inputs, then disable these inputs(ex. applicant,beneficiary) dynamically, however I'm not able to do the disable part.

My form:

let form = new FormGroup({
      basicInfoForm: this.formBuilder.group({
        applicant_custno :'',
        c_loan_agr_no :'',
        applicant : this.formBuilder.array(
          [this.formBuilder.control('')]
        ),
        lc_currency :'',
        lc_amount :'',
        advice_expiry_date :'',
        beneficiary_custno :'',
        beneficiary: this.formBuilder.array(
          [this.formBuilder.control('')]
        )
      })
})

My Html:

<div class="form-group" formArrayName="applicant">
  <div *ngFor="let appAddr of applicant.controls; let i=index">
      <div class="d-flex">
          <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
          <button type="button"  class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline">
          <input type="text" class="form-control col-10" [formControlName]="i">
          <button type="button" class="btn btn-danger" *ngIf="i > 0"  (click)="delCol('applicant',i)">-</button>
      </div>
  </div>
</div>

after setting value: pic

My Code:

this.basicInfoForm = this.form.controls.basicInfoForm;

(<FormArray>this.basicInfoForm.get('applicant')).controls.forEach(control => {
          console.log("appli");
          control.disable();
        });

In console I can see that 'appli' being printed 3 times(since I have three inputs of 'applicant'), however 'control.disable()' doesn't work.

Can anyone help? Thank you.

Answer 1

There are some errors in your code.

First one is:

<div class="form-group" formArrayName="applicant">
  <div *ngFor="let appAddr of applicant.controls; let i=index">
      <div class="d-flex">
          <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
          <button type="button"  class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline">
          <input type="text" class="form-control col-10" [formControlName]="i">
          <button type="button" class="btn btn-danger" *ngIf="i > 0"  (click)="delCol('applicant',i)">-</button>
      </div>
  </div>
</div>

It's the value of formControlName in your input.. You set to 'i' but i is only the index, you should have set it to appAddr

---

After this, maybe it should work.. I didn't managed to add it to a stackblitz, so try this !

---

EDIT: so I managed to add it on stackblitz ! So in order to make it work you need to add to your FormArray a new FormGroup with an empty control:

applicant: this.formBuilder.array(
      [this.formBuilder.group({
        app: this.formBuilder.control('')
      })]
    )

And then in your html, you should have something like this:

<div [formGroup]="ClientForm" >
  <div class="form-group">
    <div *ngFor="let appAddr of ClientForm.get('applicant').controls; let i=index">
      <div class="d-flex">
        <label class="control-label required-field col-6 mr-1" for="applicant.{{i+1}}">Applicant Address.{{i+1}} </label>
        <button type="button" class="btn btn-danger" (click)="addCol('applicant')">+</button>
      </div>
      <div class="form-inline" [formGroup]="appAddr">
        <input type="text" class="form-control col-10" formControlName="app">
        <button type="button" class="btn btn-danger" *ngIf="i > 0" (click)="delCol('applicant',i)">-</button>
      </div>
    </div>
  </div>
</div>

With ClientForm equal to your form !

Stackblitz here: https://stackblitz.com/edit/angular-formgroup-js2xiz