@Devora, я обновляю свой ответ и делаю стек-близ. Я надеюсь, что это поможет вам
далось связать данные изthis.empDetails.services
правильно в пользовательском интерфейсе, флажки отмечены правильно, а также перечислены все варианты флажков.
Тем не менее, данные не отправляются в serviceFormArray, когда я нажимаю обновить без каких-либо изменений в флажок,this.updateServicesForm.value
пустой.
Я должен снять эти флажки, а затем проверить еще раз, чтобы он подтолкнул кformarray
.
Я попробовал несколько изменений, но безрезультатно, может кто-нибудь подсказать, какой правильный код в архиве мне нужен? Огромное спасибо.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);
}
Данные из API this.empDetails.services возвращают
sservices: Array(2)
0: "mopping"
1: "washingclothes"
length: 2
__proto__: Array(0)