How to disable FormControl in FormArray in Angular 4

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