在我的反应形式,我加载资产复选框。当提交按钮被点击的值传递到_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;
}
}
只需要拿起表格的值存储在您的服务,而不是再使用patchValue
。
submit() {
this.selectedAssets = this.processDetailsForm.value;
...
}
ReloadProcessDetails() {
this.dataProcessDetail = this._dataService.getOptionProcessDetails();
this.processDetailsForm.patchValue(this.dataProcessDetail.selectedAssets);
}
Here is a slightly modified version of your example。保存 - >更改复选框 - >重装
您使用补丁下面的方法复选框值。
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))
});
}