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

someponent.html

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

someponent.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!!! :-)

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!!! :-)

• javascript
• angular
• typescript
• angular-forms
• angular-formbuilder

• 3 Maybe it's because you're using formNameArray instead of formArrayName. – Joseph Webber Commented Jul 3, 2018 at 13:29
• are you trying to create dynamic input box with disable ? – Chellappan வ Commented Jul 3, 2018 at 13:33
• @ChellappanV yes I am trying to create dynamic input box with disable – Sivakumar Tadisetti Commented Jul 3, 2018 at 13:35
• the why are you looping counterArr instead of your formNameArray – Chellappan வ Commented Jul 3, 2018 at 13:36
• @ChellappanV sorry, I didn't get you – Sivakumar Tadisetti Commented Jul 3, 2018 at 13:40

5 Answers 5

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

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>

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

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

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

It's possible by disabling the formControl while initialization or updating as below:

I assume that, testForm is the formGroupName , arrs is the FormArrayName and inputValue is the formControlName

(<FormArray>this.testForm.get('arrs')).push(new FormGroup({
  'inputValue': new FormControl({ value: '', disabled: true }, Validators.required),
}));

You have to remember that disabling the form input will not allow you to submit. Instead, you can use the readonly property as below.

<input readonly="readonly" type="text" />

This will help you get the input values from the form as well.

Source for readonly