Angular2 ReactiveFormsControl：如何绑定单选按钮？

Posted 2023-03-27

【中文标题】Angular2 ReactiveFormsControl：如何绑定单选按钮？

【英文标题】：Angular2 ReactiveFormsControl: how to bind radio buttons?

【发布时间】：2017-03-02 14:17:51

【问题描述】：

我正在使用 Angular2 的ReactiveFormsModule 创建一个包含表单的组件。这是我的代码：

foo.component.ts

constructor(fb: FormBuilder) 
    this.myForm = fb.group(
        'name': ['', Validators.required],
        'surname': ['', Validators.required],
        'gender': []
    );

foo.component.html

<div class="two fields">
    <div class="four wide field">
        <label>Name*</label>
        <input type="text" [formControl]="myForm.controls.name"/>
    </div>

    <div class="four wide field">
        <label>Surname*</label>
        <input type="text" [formControl]="myForm.controls.surname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

我在上面发布的代码不起作用：如果我单击两个单选按钮之一，它总是选择第二个并且我无法更改它。

将FormControl 与radio（或checkbox）一起使用的正确方法是什么？

【参考方案1】：

对于 string 以外的值，您可以使用 [value] 属性，并且应该使用 [checked] 属性作为初始值。

export enum Gender 
  FEMALE = 1,
  MALE   = 2


export class SampleGenderComponent implements OnInit 

  public form: FormGroup;
  public Gender = Gender;

  constructor(fb: FormBuilder) 

    this.form = fb.group(
      gender    : [
        Gender.FEMALE,
        []
      ]
    );
  

<div class="inline fields">
  <label for="gender">Gender</label>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.MALE" [checked]="form.controls['gender'].value === Gender.MALE">
      <label>Male</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.FEMALE" [checked]="form.controls['gender'].value === Gender.FEMALE">
      <label>Female</label>
    </div>
  </div>
</div>

【参考方案2】：

我解决了将具有相关值的 value 属性添加到 radio 元素：

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="male" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="female" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

这使它与[formControl] 和formControlName 一起工作。 （感谢@JsIsAwesome）

【参考方案3】：

将 formControl 更改为 formControlName 并设置控件名称。 并且不要忘记在您的表单标签中设置 [formGroup]="myForm"。

这工作正常：

<form novalidate [formGroup]="myForm">
    <input type="radio" value="male" formControlName="gender" name="gender">
    <input type="radio" value="female" formControlName="gender" name="gender">
</form>

this.myForm= this.fb.group(
  gender: [""]
);

【讨论】：

这行得通，但原因不是您使用formControlName 而不是formControl。无论如何，谢谢您的回复，您让我找出问题所在（请参阅我自己的答案）。