Dynamically Disable FormArray in Angular

Question

I have multiple checkboxes as a FormArray. When page load I want to disable all those checkboxes.

I tried in the below mentioned way but it didn't work.

Can someone please explain me on this?

.ts file

public myForm: FormGroup = new FormGroup({
    name: new FormControl('', Validators.required),
    specialized: new FormArray([]),
  });

ngOnInit(): void {
      this.companyForm.controls['specialized'].disable();
}

  get myFormArray() {
    return this.myForm.controls.specialized as FormArray;
  }

  private addCheckboxesToForm() {
    this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl(false)));
  }

.html file

<form [formGroup]="myForm">
    <div class="form-check col-md-6"
                                *ngFor="let order of myFormArray.controls; let i = index">
    
                                <label formArrayName="specialized">
                                    <input type="checkbox" [formControlName]="i">
                                    {{specilizedArea[i]?.description}}
                                </label>
    
                            </div>
     <button (click)="saveCompany()"> ADD</button>
    </form>

Can you share your entire HTML form as well as all of the pertinent form code in the component class? — pthor
– pthor, Commented Apr 27, 2022 at 18:27
Hi @PaulThorsen. I added the html form and the component is already there. — Kalana Tebel
– Kalana Tebel, Commented Apr 27, 2022 at 18:33
Is that the entire component class? Where are specilizedArea and companyForm initialized? What does saveCompany() look like? — pthor
– pthor, Commented Apr 27, 2022 at 18:36
In addCheckboxesToForm method did you try to initialize it with disabled: true? Like this: new FormControl({value: false, disabled: true}) — N.Tasikj
– N.Tasikj, Commented Apr 27, 2022 at 18:36

N.Tasikj · Accepted Answer · 2022-04-27 18:46:14Z

1

In ngOnInit you need to call method addCheckboxesToForm and inside that method just create FormControls with disabled: true property, it should look like this:

private addCheckboxesToForm() {
    this.specilizedArea.forEach(() => this.myFormArray.push(new FormControl({value: false, disabled: true})));
  }

Here is quick example that I created with your code: https://stackblitz.com/edit/angular-ivy-bmnfcd?file=src/app/app.component.ts

answered Apr 27, 2022 at 18:46

N.Tasikj

3861 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalana Tebel Over a year ago

Thank you for the prompt response. :) It's working now.

Collectives™ on Stack Overflow

Dynamically Disable FormArray in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related