angular - Angular 6 Reactive Forms输入类型=“radio”互斥选择
问题描述
我有 Angular Dynamic 表单,我将从服务加载数据。出于演示的目的,组件中的值被硬编码。我有复选框和单选按钮。复选框功能很好。然而,单选按钮有两个问题:1)它们不是相互排斥的——不作为radiogroup的一部分。如果我在 HTML 中添加 name 属性,开发工具会抛出错误“如果您在单选按钮上同时定义 name 和 formControlName 属性,它们的值必须匹配。前任: ”。所以我想它在反应形式中不起作用。2)我需要能够从这个表单(像一个向导)来回走动,并且表单应该保留值。但只有复选框保留值,而不是单选按钮。出于演示的目的,有一个保存按钮,用于将值保存到数据中。
请指导!模板:
<form [formGroup]="processDetailsForm" (ngSubmit)="submit()" *ngIf="isFormReady">
<div class="row">
<div class="form-group">
<div class="col-xs-4 margin-bottom" formArrayName='ContactStreamEntries'
*ngFor="let HCS of processDetailsForm.controls.ContactStreamEntries.controls; let i = index">
<input [formControlName]="i" type="radio" name="ContactStreamEntries[i].HCS"
[checked]="(i === 0)"
[value]="ContactStreamEntries.HCS_ID"
(change)="onSelectionChange(entry)"
/> {{ContactStreamEntries[i].HCS}}
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-4 margin-bottom" formArrayName='ContactStreamsGroups'
*ngFor="let name of processDetailsForm.controls.ContactStreamsGroups.controls; let i = index">
<input [formControlName]="i" type="checkbox" /> {{ContactStreamsGroups[i].name}}
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<button type="submit" id="btnNext"
[disabled]="processDetailsForm.invalid">
save
</button>
<button type="submit" id="btnNext" (click)="ReloadProcessDetails()">
Reload last save
</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;
//private selectedGroups;
public dataProcessDetail;
ContactStreamsGroups = [
{ id: 1, name: 'Group 1' },
{ id: 2, name: 'Group 2' },
{ id: 3, name: 'Group 3' }
];
ContactStreamEntries = [
{ HCS_ID: 1, HCS: 'ABC' },
{ HCS_ID: 2, HCS: 'DEF' }
];
constructor(private formBuilder: FormBuilder, private _dataService: DataService,
private _router: Router) { }
ngOnInit() {
this.LoadControls();
if (this._dataService.getBtnOption() === 'Back') {
this.ReloadProcessDetails();
}
}
submit() {
this.selectedAssets = this.processDetailsForm.value;
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();
this.processDetailsForm.patchValue(this.dataProcessDetail.selectedAssets);
}
LoadControls() {
const controlGroup = this.ContactStreamsGroups.map(c => new FormControl(false));
const CS = this.ContactStreamEntries.map(c => new FormControl(false));
this.processDetailsForm = this.formBuilder.group({
ContactStreamsGroups: new FormArray(controlGroup),
ContactStreamEntries: new FormArray(CS)
});
this.isFormReady = true;
}
}
服务等级:
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;
}
}
解决方案
推荐阅读
- python - tkinter 在输入框上键入,而无需先单击该条目
- javascript - JavaScript 响应式菜单
- android-studio - 更改 .AndroidStudio4.0 文件夹位置
- amazon-web-services - lambda 函数因 s3 键错误而失败。在亚马逊网络服务中
- angular - 打包 Angular 库以支持 Angular 8、9 和 10 的正确方法
- node.js - Discord.js 在语音通道加入时发送消息不起作用
- c - Attiny85,在 timer0 上实现的微秒定时器不计算正确的时间
- python - 为什么 DataFrame 中的这个替换不符合我的预期?
- javascript - Java Script-Issue in 10000 次创建动态矩形
- javascript - 如何使用 JavaScript 搜索包含所有列的表格