How to disable FormControl in FormArray in Angular 4

Question

I wrote the below code snippet, which I considered as it will disable the FormControl in a FormArray.

some.component.html

<form [formGroup]="testForm">
    <div *ngFor="let num of countArr">
        <input type="text" formNameArray="arrs">
    </div>
</form>

some.component.ts

countArr = [1, 2, 3, 4, 5];
count = 5;
arrs;
testForm: FormGroup;

this.testForm = this.formBuilder.group(
    arrs: this.formBuilder.array([])
);

this.arrs = this.testForm.get('arrs');

for (let i = 0; i < this.count; i++) {
    this.arrs.insert(i, new FormControl({value: '', disabled: true}));
}

But after for execution completed, I checked the form and found nothing has been disabled. Can you please tell me where I am doing wrong??? :-)

Thank you for your help!!! :-)

Maybe it's because you're using `formNameArray` instead of [`formArrayName`](https://angular.io/api/forms/FormArrayName). — Joseph Webber, Jul 03 '18 at 13:29
@ChellappanV yes I am trying to create dynamic input box with disable — Sivakumar Tadisetti, Jul 03 '18 at 13:35
the why are you looping counterArr instead of your formNameArray — Chellappan வ, Jul 03 '18 at 13:36

score 6 · Answer 1 · answered Jul 03 '18 at 13:51

First of all, this is how your html component should look like:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div class="form-group" *ngFor="let arrItem of testForm.get('arrs').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
        </div>
    </div>
</form>

You do not need to iterate some random count variable inside your html component. You can iterate your added controls.

You may ask "Which controls exactly? They are not added yet!"

Well, this is why you programatically add those controls in ngOnInit:

ngOnInit() {
    this.testForm = new FormGroup({
      arrs: new FormArray([])
    }
    );

    for (let i = 0; i < this.count; i++) {
      const control = new FormControl(null, Validators.required);
      (<FormArray>this.testForm.get('arrs')).push(control);
    }

    this.disableInputs();
}

This is the corrent syntax to initiate the FormArray and then create an initial control inside the for loop and push the newly created control to your array.

Note: there is a disableInputs() function call. This is where you disable your inputs programatically as well:

  disableInputs() {
    (<FormArray>this.testForm.get('arrs'))
      .controls
      .forEach(control => {
        control.disable();
      })
  }

A working sample: stackblitz

score 3 · Answer 2 · answered Jul 03 '18 at 13:59

If you want to enable Dynamic Input enable

form: FormGroup;
  orders = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  constructor(private formBuilder: FormBuilder) {
    const controls = this.orders.map(c => new FormControl(''));

    this.form = this.formBuilder.group({
      orders: new FormArray(controls)
    });

    this.form.get('orders').controls
      .forEach(control => {
        control.disable();
      })
  }

and html should look like this

<form [formGroup]="form" >
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="text" [formControlName]="i">
    {{orders[i].name}}
  </label>
</form>

Prachi · Answer 3 · 2018-07-03T14:00:33.670

2

Use formArray control in the iteration to assign it in each input:

<form [formGroup]="testForm">
    <div formArrayName="arrs">
        <div *ngFor="let num of countArr; let idx = index">
            <input type="text" [formControlName]="idx" [attr.disabled]="true">
        </div>
    </div>
</form>

You can refer to this article:

https://angular.io/guide/reactive-forms#display-the-formarray

edited Jul 03 '18 at 14:00

answered Jul 03 '18 at 13:41

Prachi

3,022
11
31

Prachi, thank you for your answer, but I want to disable each formcontrol, how can I do that? – Sivakumar Tadisetti Jul 03 '18 at 13:49
I have updated the code for disabling. Don't go for complex logic for simple functionality. – Prachi Jul 03 '18 at 14:01

score 1 · Answer 4 · answered Apr 23 '20 at 19:48

1

To disable the FormControls of a FormArray, "reset" makes it easy.

this.formGroupHere.get(['formArrayHere']).reset({
        disableFields: {
            formControlHere: true,
            otherFormControl: true
        }
    }
);

answered Apr 23 '20 at 19:48

Yoel Duran

91
4

How to disable FormControl in FormArray in Angular 4

4 Answers4