mercredi 6 février 2019

Reload Angular 6 reactive form on back button click based on checkbox values checked initially

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