How to make the first Checkbox to be Automatically Checked upon loading with FormArray in Angular 9

Question

Good day all, I have two checkbox that I used FormArray for and i want the first Checkbox to be automtically checked/selected when i run the Aplication..Please how do i go about it? See my code below

 Checkboxform: FormGroup;
 checkboxValue: FormArray; 
 constructor(private formBuilder: FormBuilder) {
    this.Checkboxform = this.formBuilder.group({
      checkArray:this.formBuilder.array([])
    })
  }

 onCheckboxChange(e) {
    this.checkboxValue = this.Checkboxform.get('checkArray') as FormArray;
    if (e.target.checked) {
      this.checkboxValue.push(new FormControl(e.target.value));
    } else {
      let i: number = 0;
     this.checkboxValue.controls.forEach((item: FormControl) => {
        if (item.value == e.target.value) {
          this.checkboxValue.removeAt(i);
          return;
        }
        i++;
      });
    }
   // console.log(checkboxValue);
    console.log(this.checkboxValue)

}

My Component.html look like this

 <div class="col-md-8">
                                <div class="form-group">
                                   <h5>{{"Select Matching Criteria" | localize}} </h5>
                                   <form [formGroup]="Checkboxform" (ngSubmit)="submit()" >

                                    <div *ngFor="let data of Criteria; let i=index">
                                      <label>
                                        <input type="checkbox" [value]="data.id" 
                                       (change)="onCheckboxChange($event)" />
                                        {{data.category}}
                                      </label>
                                    </div>
                                    <button>submit</button>
                                  </form>
                                   
                                </div>

                            </div>

Please I need help on this..

Answer 1

After your comment I hope I got you right and this will solve your problem:

First of all I would recommend to use a normal FormGroup instead of the FormArray for this use case. Then loop over your Criteria list and create FormControls for each item. As you stated that the first checkbox should be checked by default I used index === 0 as input for the FormControl therefore the value will only be true for the first one and false for all the others. I reduced the complexity here by reducing your Criteria object to only strings.

Criteria:string[] = ['criteria1', 'criteria2','criteria3'];

Checkboxform: FormGroup;

constructor(private formBuilder: FormBuilder) {
    this.Checkboxform = this.formBuilder.group({});


    this.Criteria.forEach((criteria,index) => {
       this.Checkboxform.addControl(criteria,new FormControl(index === 0))
    })
}

}

Now you need to adopt this in your template by adding the formControlName :

<form [formGroup]="Checkboxform">
  <div *ngFor="let data of Criteria; let i=index">
    <label>
      <input type="checkbox" [formControlName]="data"/>
      {{data}}
    </label>
  </div>
</form>

Answer 2

Its as simple as adding the checked attribute to your code. Just one line

 <div *ngFor="let data of Criteria; let i=index">
      <label>
          <input 
              type="checkbox" 
              [value]="data.id" 
              (change)="onCheckboxChange($event)" 
              [checked]="i === 0"  ///////// Add this line, if the index is 0, it will get checked
          />
          {{data.category}}
      </label>
 </div>