I managed to bind the data from this.empDetails.services correctly on the UI, check box are checked correctly, and also listed all the checkboxes options.
However, the data are not push to the serviceFormArray, when i click update without any changes to the checkbox, this.updateServicesForm.value is empty.
I have to uncheck those checked checkbox 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= [value]="service.value" (change)="onCheckChange($event)" [checked]=isSelected(service.value)>
<label for=>
</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;
}
updateServices() {
this.updateServicesForm.value._id = this.EmployeeDetails._id;
console.log(this.updateServicesForm.value);
}
Data from this.empDetails.services API return
sservices: Array(2)
0: "mopping"
1: "washingclothes"
length: 2
__proto__: Array(0)
Aucun commentaire:
Enregistrer un commentaire