Angular2 - 单选按钮的数据驱动方法

Question

我想在使用 Angular 2 数据驱动方法的表单中使用单选按钮。在我的组件中，我创建了一个这样的表单：

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

@Component({
    moduleId: module.id,
    selector: 'forms-data-driven',
    templateUrl: 'data-driven.component.html'
})
export class DataDrivenComponent {

  myForm: FormGroup;
  genders = ['male', 'female'];

  constructor() {
    this.myForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl('Jam', Validators.required),
        'email': new FormControl('', [
          Validators.required,
          Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]),
      }),
      'password': new FormControl('', Validators.required),
      'gender': new FormControl('male'),
    });
  }

  onSubmitted() {
    console.log(this.myForm);
  }
}

并且在 html 代码中：

<div class="radio" *ngFor="let g of genders">
        <label>
          <input type="radio"
                  formGroupName="gender"
                  [value]="g"
                  >
          {{g}}
        </label>
    </div>

问题是两个单选按钮都可以同时单击。有什么想法吗？

Answer 1

您不需要使用 formGroupName。只需给它们取与 gender 相同的名称并使用相同的 formControlName。对于 gender 表单控件，您将获得适当的选择。

<div class="radio" *ngFor="let g of genders">
        <label>
          <input type="radio" name="gender" formControlName="gender" [value]="g">                
            {{g}}
        </label>
</div>

每个表单控件都有它的 ControlValueAccessor。

收音机有自己的 RadioControlValueAccessor，它执行仅检查一台收音机的逻辑。

Angular2 - 单选按钮的数据驱动方法

Angular2 - Data-Driven approach for radio button

angular2-forms

angular