FormArray 中的嵌套 FormGroup 重复所有单选按钮值 - Angular(UI with PrimeNG)
Nested FormGroup in FormArray repeating all radio button values - Angular (UI with PrimeNG)
我正在处理带有单选按钮输入的表单(使用 PrimeNg ui 但这对于手头的问题应该无关紧要),其中每个单选按钮组都由 API 成一个表格组。在我的 AppComponent
中,我正在填充数据,这是如何来自 API(示例静态数据):
ngOnInit() {
this.settingsByCategory = [
{
categoryName: 'None',
permissions: [
{
id: 1,
name: 'Test Category 1'
},
{
id: 2,
name: 'Test Category 2'
},
{
id: 9,
name: 'Test Category 3'
}
]
}
];
this.settingForm = this.fb.group({
settings: this.fb.array([])
});
this.setForm();
}
setForm() {
this.settingsByCategory.forEach(i => {
i.permissions.forEach(p => {
(this.settingForm.get('settings') as FormArray).push(
this.fb.group({
settingId: p.id,
settingName: p.name,
permission1: null,
permission2: null,
permission3: null
})
);
});
});
}
问题是当我 select 一个单选按钮时,所有组都被 selected 而不是只有一个组。
在我的 HTML 中,我使用 FormGroup、FormArrayName 和 FormControls 的嵌套分组来填充适当的数据。有点乱,但我首先尝试解决这个问题:
<ng-container>
<div>
<form [formGroup]="settingForm">
<div formArrayName="settings" class="perm-grid">
<div *ngFor="let setting of settings.controls; index as i">
<div [formGroupName]="i">
<h2 style="border-bottom: 1px solid #495057; padding-left: 5px">{{ setting.value.settingName }}</h2>
<ul class="perm-list">
<li class="radio-grid">
<div class="radio-grid-row">
<div style="margin-left: 5px"></div>
<div>Company</div>
<div>Area</div>
<div>Location</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">None</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=0>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=0>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=0>
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">View</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=1>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=1>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=1>
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">Edit</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=2>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=2>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=2>
</p-radioButton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</ng-container>
对于标准输入,我用过这个方法,效果很好。为什么所有单选按钮表单控件在组中重复?
发生这种情况是因为单选按钮组的 name
对于所有类别都是相同的,因此所有类别都相互连接。
您可以通过以下方式解决此问题:
- 在组名后加一个suffix/prefix以区别彼此,例如您可以添加索引
i
,例如 name="permission1-{{i}}"
,这样稍后将解决类别 1 的 name="permission1-0"
和类别 2 的 name="permission1-1"
等
- 以上更改会导致与使用的
primeNG
版本相关的另一个问题,即:If you define both a name and a formControlName attribute on your radio button, their values must match
,要解决它,您可以使用 formControl
而不是 formControlName
例如:[formControl]="settingForm?.get('settings').controls[i].get('permission1')"
因此组件模板的单选按钮部分将如下所示:
<div class="radio-grid-row">
<div style="margin-left: 5px">None</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="0">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="0">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="0">
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">View</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="1">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="1">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="1">
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">Edit</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="2">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="2">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="2">
</p-radioButton>
</div>
</div>
这是您的 stackbiltz 的编辑版本:
https://stackblitz.com/edit/primeng-dynamicdialog-demo-25iydv
我正在处理带有单选按钮输入的表单(使用 PrimeNg ui 但这对于手头的问题应该无关紧要),其中每个单选按钮组都由 API 成一个表格组。在我的 AppComponent
中,我正在填充数据,这是如何来自 API(示例静态数据):
ngOnInit() {
this.settingsByCategory = [
{
categoryName: 'None',
permissions: [
{
id: 1,
name: 'Test Category 1'
},
{
id: 2,
name: 'Test Category 2'
},
{
id: 9,
name: 'Test Category 3'
}
]
}
];
this.settingForm = this.fb.group({
settings: this.fb.array([])
});
this.setForm();
}
setForm() {
this.settingsByCategory.forEach(i => {
i.permissions.forEach(p => {
(this.settingForm.get('settings') as FormArray).push(
this.fb.group({
settingId: p.id,
settingName: p.name,
permission1: null,
permission2: null,
permission3: null
})
);
});
});
}
问题是当我 select 一个单选按钮时,所有组都被 selected 而不是只有一个组。
在我的 HTML 中,我使用 FormGroup、FormArrayName 和 FormControls 的嵌套分组来填充适当的数据。有点乱,但我首先尝试解决这个问题:
<ng-container>
<div>
<form [formGroup]="settingForm">
<div formArrayName="settings" class="perm-grid">
<div *ngFor="let setting of settings.controls; index as i">
<div [formGroupName]="i">
<h2 style="border-bottom: 1px solid #495057; padding-left: 5px">{{ setting.value.settingName }}</h2>
<ul class="perm-list">
<li class="radio-grid">
<div class="radio-grid-row">
<div style="margin-left: 5px"></div>
<div>Company</div>
<div>Area</div>
<div>Location</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">None</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=0>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=0>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=0>
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">View</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=1>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=1>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=1>
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">Edit</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1"
formControlName="permission1" [value]=2>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2"
formControlName="permission2" [value]=2>
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3"
formControlName="permission3" [value]=2>
</p-radioButton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</ng-container>
对于标准输入,我用过这个方法,效果很好。为什么所有单选按钮表单控件在组中重复?
发生这种情况是因为单选按钮组的 name
对于所有类别都是相同的,因此所有类别都相互连接。
您可以通过以下方式解决此问题:
- 在组名后加一个suffix/prefix以区别彼此,例如您可以添加索引
i
,例如name="permission1-{{i}}"
,这样稍后将解决类别 1 的name="permission1-0"
和类别 2 的name="permission1-1"
等 - 以上更改会导致与使用的
primeNG
版本相关的另一个问题,即:If you define both a name and a formControlName attribute on your radio button, their values must match
,要解决它,您可以使用formControl
而不是formControlName
例如:[formControl]="settingForm?.get('settings').controls[i].get('permission1')"
因此组件模板的单选按钮部分将如下所示:
<div class="radio-grid-row">
<div style="margin-left: 5px">None</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="0">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="0">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="0">
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">View</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="1">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="1">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="1">
</p-radioButton>
</div>
</div>
<div class="radio-grid-row">
<div style="margin-left: 5px">Edit</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission1-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission1')" [value]="2">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission2-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission2')" [value]="2">
</p-radioButton>
</div>
<div>
<p-radioButton (onClick)="logRadio($event, setting)" name="permission3-{{i}}"
[formControl]="settingForm?.get('settings').controls[i].get('permission3')" [value]="2">
</p-radioButton>
</div>
</div>
这是您的 stackbiltz 的编辑版本: https://stackblitz.com/edit/primeng-dynamicdialog-demo-25iydv