单选按钮组之间的制表符以 angular 形式中断

Question

我有两个单选按钮组，我在其中添加了 angular 表单控件。我运行遇到的问题是，当我添加控件时，单选按钮分组正在消失。此外，当我检查单选按钮时，它的 name 属性也消失了。结果是我无法再在不同的单选按钮组之间正确切换。我该如何解决这个问题？

示例：https://stackblitz.com/edit/angular-qdqnmo

TS:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  formData = {
          "questions": [
            {
              "refCode": "Question1",
              "answers": [
                {
                  "refCode": "Question1Answer1",
                  "selected": true
                },
                {
                  "refCode": "Question1Answer2",
                  "selected": false
                }
              ]
            },
            {
              "refCode": "Question2",
              "answers": [
                {
                  "refCode": "Question2Answer1",
                  "selected": false
                },
                {
                  "refCode": "Question2Answer2",
                  "selected": false
                },
                {
                  "refCode": "Question3Answer3",
                  "selected": true
                }
              ]
            }
          ]
        };

  formGroup: FormGroup;

  ngOnInit() {
    const group = {};

    this.formData.questions.forEach(question => {
      group[question.refCode] = new FormControl();
    });

    this.formGroup = new FormGroup(group);
  }
}

HTML:

<h2>Normal Buttons:</h2>
<div *ngFor="let question of formData.questions; index as i;">
  <h3>Group {{i + 1}}:</h3>
  <div>
    <div *ngFor="let answer of question.answers" >
      <input type="radio" id="answer.refCode" [checked]="answer.selected" 
      [name]="question.refCode" [value]="answer.refCode" >
      <label for="answer.refCode">{{answer.refCode}}</label>  
    </div>
  </div>
  --------------------------------------------------------------------
</div>

<h2>Angular Buttons:</h2>
<div *ngFor="let question of formData.questions; index as i;">
  <h3>Group {{i + 1}}:</h3>
  <div [formGroup]="formGroup">
    <div *ngFor="let answer of question.answers" >
      <input type="radio" id="answer.refCode" [checked]="answer.selected" 
      [name]="question.refCode" [value]="answer.refCode" 
      [formControlName]="question.refCode">
      <label for="answer.refCode">{{answer.refCode}}</label>  
    </div>
  </div>
  --------------------------------------------------------------------
</div>

模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

题外话：有意思的问题，之前没注意！

使用似乎可以解决这个问题！这样您就可以在字段中获得实际的 name 属性，就像 "normal" 按钮一样。

但是...您还有另一个即将出现的问题，所以我们也来解决这个问题，无论如何您最终都会运行解决这个问题。

但首先，改用属性绑定：

使用：

[attr.name]="question.refCode"

而不是：

[name]="question.refCode"

接着说你的其他问题。当然，在您的模板中使用 [checked] 时，它看起来已选中，但实际上在您与单选按钮交互之前不会设置表单值。因此，删除 [checked] 并将值设置为表单控件。这意味着您正在寻找 selected 属性的答案，即 true（如果存在），但您想使用 refCode 作为值。那么我建议如下：

this.formData.questions.forEach(question => {
  const preselected = question.answers.find(x => x.selected === true)
  group[question.refCode] = new FormControl((preselected && preselected.refCode) || null);
});

Your forked STACKBLITZ

单选按钮组之间的制表符以 angular 形式中断

Tabbing between radio buttons groups breaks with angular forms

angular

angular-forms