Ufdjrw

I managed to bind the data from this.empDetails.services correctly on the UI, checkboxes are checked correctly, and also listed all the checkboxes options.

However, the data are not pushed to the serviceFormArray, when I click update without any changes to the checkbox, this.updateServicesForm.value is empty.

I have to uncheck those checked checkboxes and then check it again so that it will push to the formarray.

I tried a few changes, but to no avail, can someone suggest what is the correct code to archived what I need? Thank you so much.
HTML

<form action="javascript:" [formGroup]="updateSvcForm">
 <div class="row" *ngFor="let service of servicesOptions; let i=index">
 <div class="col-sm-12">
 <div class="checkbox-color checkbox-primary">
 <input type="checkbox" id=service.value [value]="service.value" (change)="onCheckChange($event)" [checked]=isSelected(service.value)>
 <label for=service.value>
 service.description
 </label>
 </div>
 </div>
 </div>
 <div class="form-group row">
 <label class="col-sm-2"></label>
 <div class="col-sm-10">
 <button class="btn btn-primary m-b-0 ripple light" (click)="updateServices()">Update</button>
 </div>
 </div>
</form>

Component.TS

sservicesOptions = [
 description: '1. Sweeping', value: 'sweeping' ,
 description: '2. Mopping', value: 'mopping' ,
 description: '3. Windows', value: 'windows' ,
 description: '4. Washing Clothes', value: 'washingclothes' ,
];


this.updateSvcForm= this.fb.group(
 sservices: new FormArray([]),
);

onCheckChange(event) 
 const sservicesFormArray: FormArray =
 this.updateSvcForm.get('sservices') as FormArray;


 if (event.target.checked) 
 sservicesFormArray.push(new FormControl(event.target.value));
 
 else 
 let i: number = 0;
 sservicesFormArray.controls.forEach((ctrl: FormControl) => 
 if (ctrl.value == event.target.value) 
 sservicesFormArray.removeAt(i);
 return;
 
 i++;
 );
 


isSelected(sserviceOption) 
 return this.empDetails.services.indexOf(serviceOption) >= 0;

 console.log(this.updateSvcForm.value);
 }

Data from this.empDetails.services API return

sservices: Array(2)
0: "mopping"
1: "washingclothes"
length: 2
__proto__: Array(0)

you forget to set the new value of the form Array sservices :

onCheckChange(event) 
 const sservicesFormArray: FormArray =
 this.updateSvcForm.get('sservices') as FormArray;


 if (event.target.checked) 
 sservicesFormArray.push(new FormControl(event.target.value));
 
 else 
 let i: number = 0;
 sservicesFormArray.controls.forEach((ctrl: FormControl) => 
 if (ctrl.value == event.target.value) 
 sservicesFormArray.removeAt(i);
 break;
 
 i++;
 );
 
 // set the new value of sservices form array
 this.updateSvcForm.setControl('sservices', sservicesFormArray);

the "easy" way is to create a FormArray with values true/false. see the example in stackblitz

Update:Correct some errors

You fill the formArray using the data and the sservicesOptions

getFormArrayService(data:any[]):FormArray
 
 //e.g. data=['mopping','washingclothes']
 // return a FormArray and the value will be [false,true,false,true]
 //if data=null, return a FormArray [false,false,false,false]
 return new FormArray(
 this.sservicesOptions.map(x=>new FormControl(data?data.find(dat=>dat==x.value)?true:false:false))
 )
 

So, you can, in ngInit make some like

ngOnInit()
 
 this.updateSvcForm=new FormGroup(
 sservices:this.getFormArrayService(null)
 )
 

And in submitting the form, transform the value

 submit(updateSvcForm)
 
 if (updateSvcForm.valid)
 
 let services:string[]=[];
 updateSvcForm.value.sservices.forEach((x,index)=>
 
 if (x)
 services.push(this.sservicesOptions.value)
 )
 const result=
 ...updateSvcForm.value, //all value of the form but
 sservices:services
 
 console.log(result)
 
 

The .html becomes like

<form *ngIf="updateSvcForm" [formGroup]="updateSvcForm" (submit)="submit(updateSvcForm)">
 <div formArrayName="sservices">
 <div *ngFor="let control of updateSvcForm.get('sservices').controls;let i=index">
 <input type="checkbox" [formControlName]="i"/>
 sservicesOptions[i].description

 </div>
 </div>
 <button type="submit">submit</button>
 </form>
 updateSvcForm?.value

The "not so easy way" a customFormControl, see an example in stackblitz

Basically, we create a series of the checkbox, each change in checkbox return the "booleansToProp". In the example, I add a property "required", then indicate it is invalid if no check is checked and isString if we can return a string, not an array

@Component(
 selector: 'check-box-group',
 template: `
 <ng-container *ngFor="let item of source;let i=index;let last=last">

 <div [ngClass]="last?'form-group':''" class="form-check" >
 <input type="checkbox" class="form-check-input" id="_name+''+i"
 [ngModel]="_selectedItems[i]"
 (ngModelChange)="setValue($event,i)" (blur)="onTouched()" >
 <label class="form-check-label" for="_name+''+i">item[_col]</label>
 </div>

 </ng-container>
 `,
 providers: [
 
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => CheckBoxGroupComponent),
 multi: true
 ,
 
 provide: NG_VALIDATORS,
 useExisting: forwardRef(() => CheckBoxGroupComponent),
 multi: true,
 

 ],
 styles:[`
 .focused 
 outline: black dotted thin;
 `
 ]
)
export class CheckBoxGroupComponent implements ControlValueAccessor null
 if (!this._isRequired)
 return null;
 if (!this._selectedItems.find(x=>x))
 return error:"you must select one option at last"

 return null
 

 //we received an array (or a string separated by commas) and
 //return an array of true/false
 propsToBoolean(props): any[] 
 let propsString=props?props.map(x=>''+x):null;
 return props ? this.source.map((x: any) => propsString.indexOf(''+x[this._key]) >= 0)
 : this.source.map(x => false);

 

 //we received an array of true/false and return an array with the values
 //or with teh values separated by commas
 booleanToProps(propsBoolean: boolean[]) 
 let props: any[] = [];
 if (propsBoolean) 
 propsBoolean.forEach((item, index) => 
 if (item)
 props.push(this.source[index][this._key])
 )
 
 return props;

 

The reason for this, is that you are using checked to mark which checkboxes should be checked, they have no correlation to your form array, so if you do not touch the checkboxes, the formarray will correctly be empty.

I can come up with a couple options to solve this... also the following changes:

change function could be changed to this:

onCheckChange(event) 
 if (event.target.checked) 
 this.ssArray.push(this.fb.control(event.target.value));
 
 else 
 this.ssArray.removeAt(this.ssArray.value.findIndex(x => x === event.target.value))
 

Doesn't matter how you do it, your way works as well :) I also like using FormBuilder (here injected as fb).

I like to use a getter in this case:

get ssArray() 
 return this.updateSvcForm.get('sservices') as FormArray;

The options I can think of:

1. add a checked property to the objects in your array sservicesOptions
   


2. Keep your isSelected function, but add the chosen options to your formarray initially

I like option 1 best, so add a checked property to the objects:

servicesOptions = [
 description: '1. Sweeping', value: 'sweeping', checked: false ,
 description: '2. Mopping', value: 'mopping', checked: false ,
 description: '3. Windows', value: 'windows', checked: false ,
 description: '4. Washing Clothes', value: 'washingclothes', checked: false ,
];

Then when you build the form, change the checked status for those that should be preselected, and also add the values that should be checked to your form array:

constructor(private fb: FormBuilder) 
 this.updateSvcForm = this.fb.group(
 sservices: this.fb.array([]),
 );
 // change the checked status for the checkboxes that should be checked
 this.servicesOptions.map(x => 
 this.empDetails.services.indexOf(x) >= 0 ? x.checked = true : x.checked = false)
 // initially set the selected form controls to the formarray
 this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))

Then you can add [checked]="service.checked" in template.

DEMO

Option 2:

Keep your checked function like you have, just remember to add the prechosen values to your formarray. I don't really like this option, since for example, we end up calling a function in template, which is really not recommended. But anyway, keep the code as the same as you have now, just add the intial values to the formarray:

this.updateSvcForm = this.fb.group(
 sservices: this.fb.array([]),
);
// add the intial values to the formarray:
this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))

DEMO

I added a console.log inside the function, to show how it is called. It's okay for a demo like this, but if you have a big form, I would really caution for you to use this solution.

There would be a third option, to actually set all values to your form array, and then just toggle the boolean value of the checkbox, but that would require some refactoring of code, which I don't know if you want. But there is that option too.