Angular2 Reactive Forms formControl用于单选按钮

Question

我正在使用Reactive Forms在Angular2中构建一个表单.我正在使用FormBuilder来创建一组字段.对于文本框,这非常有效.但我找不到单选按钮的formControl.

这是如何运作的？我应该<input formControlName="gender" type="radio">像文字输入那样做吗？

Answer 1

在组件中,将单选按钮定义为表单的一部分:

export class MyComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      gender: ""
    });
  }
}

在组件HTML中,构建表单:

<div class="form-group">
  <label>Please select your gender</label>
  <div class="row">
    <label class="md-check">
      <input type="radio" value="female" name="gender" formControlName="gender">
      Female
    </label>

    <label class="md-check">
      <input type="radio" value="male" name="gender" formControlName="gender">     
      Male
    </label>
  </div>
</div>

我假设您知道如何使用提交按钮构建整个表单,此处未显示.

提交表单后,您可以在此处获取单选按钮的值:

let genderValue = this.form.value.gender;

根据检查的单选按钮,这将是"女性"或"男性".

希望这对你有所帮助.祝好运!

Answer 2

我应该<input formControlName="gender" type="radio">像文字输入那样做吗？

是.

这是如何运作的？

表单控件指令使用ControlValueAccessor指令与本机元素进行通信.ControlValueAccessors每种可能的输入都有不同的类型.正确的一个由selector值访问器指令选择.该选择是基于什么样type的<input>是.如果有type="radio",则使用无线电的值访问器.

Answer 3

我注意到了一个关于响应式表单的小内容。如果该值为整数，则需要将其更改为字符串，否则将不会选择单选按钮。

  this.jobForm = this._fb.group({
                    id: [res["job"]["id"]],
                    job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
                    title: [res["job"]["title"],Validators.required]
                });