In my reactive form, I am loading assets in checkboxes. When Submit button is clicked the values are passed on to a _dataService service class and retrieved on the next form 'forms' where it is routed to. The user could press back button from 'forms' and when this form reloads, it should be able to populate the initially checked values. I am able to retrieve the values back from the _dataService, however, I can't figure out how to check the checkboxes.
Here is the template:
<form [formGroup]="processDetailsForm" (ngSubmit)="submit()" *ngIf="isFormReady">
<div class="form-group">
<div class="col-xs-4" formArrayName='assets'
*ngFor="let option of processDetailsForm.controls.assets.controls; let i = index">
<input [formControlName]="i" type="checkbox" />
</div>
</div>
<div class="form-group">
<div class="row">
<button type="submit" id="btnNext" class="btn btn-primary" [disabled]="processDetailsForm.invalid">
Next >
</button>
</div>
</div>
and the component:
assets = [
{ id: 1, option: 'chk 1' },
{ id: 2, option: 'chk 2' },
{ id: 3, option: 'chk 3' },
{ id: 4, option: 'chk 4' },
{ id: 5, option: 'chk 5' },
{ id: 6, option: 'chk 6' }
];
LoadControls() {
this._reportingService.isLoading = true;
const controls = this.assets.map(c => new FormControl(true));
this.processDetailsForm = this.formBuilder.group({
assets: new FormArray(controls)
});
}
submit() {
this.selectedAssets = this.processDetailsForm.value.assets
.map((v, i) => v ? this.assets[i] : null)
.filter(v => v !== null);
this.dataProcessDetail = {
'selectedAssets' : this.selectedAssets
}
this._dataService.setOptionProcessDetails('dataProcessDetail', this.dataProcessDetail);
this._router.navigate(['forms']);
}
ReloadProcessDetails() {
this.dataProcessDetail = this._dataService.getOptionProcessDetails();
//?? Can’t figure out how to assign selectedAssets to check the required checkboxes
this.selectedAssets = this.dataProcessDetail.selectedAssets;
}
P.S. I have only shared relevant code.
Aucun commentaire:
Enregistrer un commentaire