vincular dados à caixa de seleção angular
Consegui vincular os dados dethis.empDetails.services
corretamente na interface do usuário, as caixas de seleção estão marcadas corretamente e também listam todas as opçõe
No entanto, os dados não são enviados para o serviceFormArray, quando clico em atualizar sem nenhuma alteração na caixa de seleção,this.updateServicesForm.value
está vazia
Tenho desmarcar as caixas de seleção marcadas e, em seguida, marque-as novamente para que elas sejam enviadas paraformarray
.
Eu tentei algumas alterações, mas sem sucesso, alguém pode sugerir qual é o código correto para arquivar o que eu preciso? Muito obrigado. 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);
}
Dados da API this.empDetails.services return
sservices: Array(2)
0: "mopping"
1: "washingclothes"
length: 2
__proto__: Array(0)