时间戳

首页 > 解决方案 > FormArray 中的嵌套 FormGroup 重复所有单选按钮值 - Angular（带有 PrimeNG 的 UI）

javascript - FormArray 中的嵌套 FormGroup 重复所有单选按钮值 - Angular（带有 PrimeNG 的 UI）

问题描述

堆栈闪电战

我正在处理带有单选按钮输入的表单（使用 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
          })
        );
      });
    });
  }

问题是当我选择一个单选按钮时，所有组都被选中，而不仅仅是一个组。
在此处输入图像描述

在我的 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>

使用标准输入，我使用了这种方法并且效果很好。为什么所有单选按钮表单控件都在组间重复？

堆栈闪电战

标签： javascriptangulartypescriptprimengangular-forms

解决方案

发生这种情况是因为name单选按钮组的所有类别都相同，因此所有类别都相互连接。

您可以通过以下方式解决此问题：

  • 为组名添加后缀/前缀以区分它们，例如，您可以添加i诸如的索引name="permission1-{{i}}"，因此稍后将解决name="permission1-0"为类别 1 和name="permission1-1"类别 2...等。
  • 上述更改将导致与使用的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

推荐阅读