Question

我有一个带有单选按钮的被动表单。单选按钮看起来像这样：

  <label [for]="question.id + '_' + selectableValue.id"
    *ngFor="let selectableValue of selectableValues">
    <input
      type="radio"
      [id]="question.id + '_' + selectableValue.id"
      [value]="selectableValue.id"
      [formControl]="formControlToUse"
      [formControlName]="question.id"
      name="{{ question.id }}"
      (change)="execChange($event)"
    >
    {{selectableValue.displayName}}
  </label>

所有变量都存在且已正确解析。每个问题question.id是唯一的（一个问题包含几个无线电（=可修饰值）。

然而，当我点击一个单选按钮时，另一个没有取消选中 - ＆gt;两者都被选中。但是：无线电中的名称是相同的。

有人可以帮帮我吗？

@Update：请在此处查看生成的DOM。在这里您可以看到名称基本相同。不过，出于某种奇怪的原因，可以选择这两个复选框......

Answer 1

您必须将相同的formControlName提供给您的广播组。您可以使用name删除formControlName属性。

完整示例：

@Component({
    selector: 'app',
    template: `
        <div [formGroup]="form">
            <div *ngFor="let question of questions">
                <label [for]="question.id + '_' + selectableValue.id" *ngFor="let selectableValue of selectableValues">
                    <input type="radio"
                           [id]="question.id + '_' + selectableValue.id"
                           [value]="selectableValue.id"
                           [formControlName]="question.id">
                    {{selectableValue.displayName}}
                </label>
            </div>
        </div>
    `,
})
export class AppCp {
    form: FormGroup;
    questions = [{id: 'id1'}, {id: 'id2'}];
    selectableValues = [
        {id: 1, displayName: 'first'},
        {id: 2, displayName: 'second'}
    ];

    constructor(fb: FormBuilder) {
        let group = {};
        this.questions.forEach(q => group[q.id] = '');
        this.form = fb.group(group);
    }
}

结果

Answer 2

我面临类似的问题。我所缺少的是单选按钮中的Name属性。两个单选按钮均应具有Name属性，并且两个单选按钮的Name应相同。

下面是我的示例：

component.html

      <div class="col-md-8 form-group">
    <div class="radio">
      <label>
        <input class="form-control"
               id="rdoNew"
               type="radio"
               name="newOrUsed1"
               formControlName="newOrUsed" value="new" />
        New
      </label>
    </div>
    <div>
      <label>
        <input class="form-control"
               id="rdoUsed"
               type="radio"
               name="newOrUsed1"
               formControlName="newOrUsed" value="used" />
        Used
      </label>
    </div>
  </div>

Component.ts

export class AutoloanComponent implements OnInit {

loanInfoGroup: FormGroup;

constructor() { }

ngOnInit() { this.loanInfoGroup = new FormGroup({

  `newOrUsed: new FormControl(),`

});

}

Answer 3

出于某种疯狂的原因，使用[attr.name]解决了此问题。您需要将[attr.name]和[formControlName]绑定到相同的值。也许这是另一个更优雅的解决方案，但我还没有找到。

这已经很晚了，但希望这可以帮助其他偶然发现此问题的人。

反应形式：单选按钮选择两者

3 个答案: