Angular 5：如何迭代表单组件并设置值

Question

我有一个Angular 5表单（uses Angular Bootstrap 4）单选按钮组组件。大约有25个单选按钮组，每组有3个选项：N / A，Secondary，Primary。我想允许所有单选按钮组使用N / A和Secondary，但只有一个单选按钮组可以进行主要检查。

我希望有一个点击处理程序拦截任何主要检查，迭代所有其他单选按钮组，并将它们设置为辅助，如果当前选中为主要，从而只留下选中了主要选项的单选按钮组。如何在我的点击处理程序中实现这一点？

Answer 1

您应该只能为每个组添加一个(change)事件侦听器，以调用组件中的方法来迭代表单并更新控件当前具有值为primary的值。

一个样本plunkr / stackblitz将被欣赏，显示你在哪里，然后也可以用作答案的基础。请注意，这是一个简单的概念验证

StackBlitz示例：

• https://stackblitz.com/edit/angular-v7uuuf?embed=1&file=app/app.component.ts

以下是要点：

HTML：

向主要无线电输入添加更改处理程序以处理被选中

<form [formGroup]="formGroup">
  <div *ngFor="let x of [1, 2, 3]">
    <input type="radio" value="na" [formControlName]="x">N/A
    <input type="radio" value="secondary" [formControlName]="x"> Secondary
    <input type="radio" value="primary" [formControlName]="x" 
        (change)="doPrimaryClick(x)"> Primary
  </div>
</form>

TS代码：

在处理程序中，查找当前设置为primary的所有控件并将其重置为secondary

doPrimaryClick(x) {
    // ignore the poor control names here
    [1, 2, 3].filter(i => i !== x)
      .forEach(i => {
        const control = this.formGroup.get(`${i}`);
        // current control is primary, so reset to secondary
        if (control.value === 'primary') {
          control.setValue('secondary');
        }
      })
  }