Перезапустите Angular 6 реактивную форму при нажатии кнопки «Назад» на основе значений, отмеченных изначально - PullRequest
Новая
       20

Перезапустите Angular 6 реактивную форму при нажатии кнопки «Назад» на основе значений, отмеченных изначально

0 голосов
/ 07 февраля 2019

В своей реактивной форме я загружаю активы в чекбоксы.При нажатии кнопки «Отправить» значения передаются в класс обслуживания _dataService и извлекаются из следующей формы «формы», куда она направляется.Пользователь может нажать кнопку «Назад» в «формах», и когда эта форма перезагрузится, она сможет заполнить первоначально проверенные значения.Я могу получить значения обратно из _dataService правильно в this.dataProcessDetail.selectedAssets, однако я не могу понять, как проверить флажки.Я думаю, как установить их в true или false.Вот полный пример кода:

шаблон: 

<form [formGroup]="processDetailsForm" (ngSubmit)="submit()" *ngIf="isFormReady">

    <div class="row">

        <div class="form-group">
            <label class="col-sm-12 control-label">
                Select 
            </label>
            <div class="col-xs-4" formArrayName='assets'
                 *ngFor="let option of processDetailsForm.controls.assets.controls; let i = index">
                <input [formControlName]="i" type="checkbox" /> {{assets[i].option}}
            </div>
        </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>
</form>

и компонент: 

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { DataService } from '../../services/data.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-reports',
    templateUrl: './reports.component.html',
    styleUrls: ['./reports.component.scss']
})
export class ReportsComponent implements OnInit {
    processDetailsForm: FormGroup;
    isFormReady: boolean = false;
    private selectedAssets;
    public dataProcessDetail;
    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' }
    ]; 
    constructor(private formBuilder: FormBuilder, private _dataService: DataService,
         private _router: Router) { }

    ngOnInit() {
        this.LoadControls();
        if (this._dataService.getBtnOption() === 'Back') {
            this.ReloadProcessDetails();
        }
        // this.LoadContactStreamsAssets();

    }
    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.setBtnOption('btnNextORBack', 'Next');

        this._dataService.setOptionProcessDetails('dataProcessDetail', this.dataProcessDetail);
        this._router.navigate(['forms']);
    }
    ReloadProcessDetails() {
        this.dataProcessDetail = this._dataService.getOptionProcessDetails();
        for (var i = 0; i < this.dataProcessDetail.selectedAssets.length; i++) {
            this.processDetailsForm.controls['assets'].setValue(
                this.processDetailsForm.controls['assets'].value
                    .map(value => this.dataProcessDetail.selectedAssets[i].option)
            );
            }
    }
    LoadControls() {
        const controls = this.assets.map(c => new FormControl(true));
        this.processDetailsForm = this.formBuilder.group({
            assets: new FormArray(controls)
        });
        this.isFormReady = true;

    }
}

.. и data.service.ts 

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class DataService {
    public btnData: string;
    public processData: any = null;

    setOptionProcessDetails(option, value) {
        this.processData = value;
    }
    getOptionProcessDetails() {
        return this.processData;
    }
    setBtnOption(option, value) {
        this.btnData = value;
    }
    getBtnOption() {
        return this.btnData;
    }

}

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Вы устанавливаете значения флажков, используя следующий метод. 

   ReloadProcessDetails() {
    this.dataProcessDetail = this._dataService.getOptionProcessDetails();
    this.processDetailsForm = this.formBuilder.group({
        assets:  this.formBuilder.array(this.assets.map(x => 
      this.dataProcessDetail.selectedAssets.indexOf(x.option) > -1))
    });
        }
0 голосов
/ 07 февраля 2019

Просто сохраните значение формы в вашем сервисе и используйте patchValue. 

submit() {
    this.selectedAssets = this.processDetailsForm.value;
    ...
}
ReloadProcessDetails() {
    this.dataProcessDetail = this._dataService.getOptionProcessDetails();
    this.processDetailsForm.patchValue(this.dataProcessDetail.selectedAssets);
}

Вот немного измененная версия вашего примера .сохранить -> изменить флажки -> перезагрузить

...