Angular Reactive Forms：动态生成单选按钮

Question

预期行为： 从 json 文件生成一组多项选择题。每个问题应包含无线电输入形式的多个选项。您一次只能选择一个选项。

预期行为 -

实际行为： 一切看起来都是正确的，直到您单击单选按钮，然后单击另一个按钮，它不会取消选择前一个按钮。如果您继续单击并且无法取消选择其中任何一个，则最终可能会选择每个选项。

实际行为-

代码分解： 它的基础是 Review 组件，我们在其中循环一系列问题并为每个问题生成一个问题组件。我们还构建 FormGroup 并传递它。每个 Question 组件都以完全相同的方式生成多个 Option 组件。每个 Option 组件都包含一个<input type="radio"> 和一个<label>

stackblitz.com/edit/angular-dynamically-generated-radio-buttons

观察： 在 Option 组件的 html 中，如果我从 <input> 中删除 [formControlName]="name"，那么它会纠正我遇到的问题，但这是响应式表单不可或缺的。我一定是在这里做错了什么，但对于我的生活，我无法弄清楚。它的行为就像每个选项都有自己的表单控件，或者至少是我想象的那样。

您可以在下面看到表单组的日志，以及问题 1：选项 1&2 的 html。据我所知，它应该是这样的。请帮忙！

FormGroup 的日志 -

问题1、选项1&2的html -

Answer 1

<div class="form-check" [formGroup]="form">
    <input class="form-check-input"  type="radio" [id]="id" [value]="option.letter" [name]="name" #op [formControlName]="name" >
    <label class="form-check-label" [for]="id" >
    {{option.text}}
  </label>
</div>

import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
import { Question } from '../../models/question';
import { Option } from '../../models/option';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-option',
  templateUrl: './option.component.html',
  styleUrls: ['./option.component.scss']
})
export class OptionComponent implements OnInit, AfterViewInit {
  @Input() question: Question;
  @Input() option: Option;
  @Input() form: FormGroup;
  @ViewChild('op') op: ElementRef;
  id:string;
  name:string;

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    this.id = `${this.question.number}${this.option.letter}`;
    this.name = `${this.question.number}`;
  }
  ngAfterViewInit() {
    this.renderer.setProperty(this.op.nativeElement, 'name', this.name);

  }
}

共享代码应该可以解决您的问题。

发生这种情况是因为由于某种原因 angular 没有在单选按钮上写入 name 属性。

所以这段代码是明确写出来的。

Answer 2

Rahul 的补丁效果很好，但我最终只是切换到使用 angular-material 元素。事后看来，在使用 Angular 时使用 Angular Material 元素可能是个好主意。但是对于那些因任何原因无法解决的人来说，他的解决方法是有效的。

这是我的代码在使用角度材料时的样子：

选项组件html

<div>
  <mat-radio-button [value]="option.letter" >
    {{option.text}}
  </mat-radio-button>
</div>

问题组件html

<div [formGroup]="form">
  <mat-radio-group [formControlName]="name">
    <label>{{question.label}}</label>
    <ng-template #options_anchor></ng-template>
  </mat-radio-group>
</div>