Within my reactive form, I am binding a checkbox list to an array using the following structure: {id:number, name:string}.
TS
ngOnInit(): void {
this.initFCForm();
this.addCheckboxes();
}
initFCForm(): void {
this.fcForm = this.formBuilder.group({
frequency : new FormControl('', [Validators.required]),
rules: new FormArray([])
});
}
get rulesFormArray() {
return this.fcForm.controls.rules as FormArray;
}
private addCheckboxes() {
this.businessrules.forEach(() => this.rulesFormArray.push(new FormControl(false)));
}
HTML
<label class="col-md-7" formArrayName="rules"
*ngFor="let rule of rulesFormArray.controls; let i = index">
<input type="checkbox" [formControlName]="i">
{{businessrules[i].name}}
</label>
I now want to preselect the first and the third options when the page loads. However, using the code below only selects the first two options.
TS
this.fc.rules.patchValue([1,3])