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

Question

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

预期行为 -

实际行为： 一切看起来都是正确的，直到您单击单选按钮然后单击另一个按钮并且它不会删除 select 前一个按钮。如果您一直单击并且无法删除select任何一个选项，您最终可能会 selecting 每个选项。

实际行为 -

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

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

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

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

FormGroup 日志 -

问题 1 的

html，选项 1&2 -

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 没有在单选按钮上写入名称属性。

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

Answer 2

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

下面是我的代码 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>

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

Angular Reactive Forms: Dynamically generating radio buttons

dynamic

radio-button

angular

angular-reactive-forms