单选按钮未在角度 2 中进行检查答案

【问题标题】：Radio button is not getting checked in angular 2单选按钮未在角度 2 中进行检查
【发布时间】：2017-03-03 06:25:01
【问题描述】：

我为性别创建了两个单选按钮，我想显示之前选中的单选按钮。

我在模板中添加了以下代码

<div class="form-group">
    <label>Gender</label>

    <div id="input-type">
        <label class="radio-inline">
            <input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
        </label>
        <label class="radio-inline">
              <input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
        </label>
    </div>
</div>

我在组件中添加了以下代码。

console.log(this.gender);  // I am getting 'male' here.
this.editProfile = new FormGroup({
     gender: new FormControl(this.gender || null)
});

显示表单的其他值，但未选中单选按钮。

【问题讨论】：

[name]和[value]是什么属性？
单选按钮的名称和值，但我也试过没有名称。

标签： javascript jquery angular

【解决方案1】：

你可以这样写

  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

    <label class="radio-inline">
            <input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
        </label>
        <label class="radio-inline">
              <input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
        </label>
     <button type="submit" [disabled]="form.invalid">Submit</button>

    {{form.value|json}}
  </form>

它应该适合你

查找PLUNK here

【讨论】：

【解决方案2】：

我找到了其他解决方案。我们可以使用下面的代码

<div class="form-group">
    <label>Gender</label>
      <div id="input-type">
          <label class="radio-inline">
              <input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
          </label>
          <label class="radio-inline">
                <input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
          </label>
      </div>
</div>

【讨论】：

【解决方案3】：

当您使用反应式表单时，您可以在输入中省略 name 属性，并且因为您将字符串值设置为输入，所以您必须使用 value="male" 而不是 [value]="'male'"。

<div class="form-group">
  <label>Gender</label>

  <div id="input-type">
    <label class="radio-inline">
        <input type="radio" formControlName="gender" value="male"/> Male
    </label>
    <label class="radio-inline">
          <input type="radio" formControlName="gender" value="female"/> Female
    </label>
  </div>
</div>

【讨论】：

我已经尝试过了，但它不起作用，我仍然没有得到检查
通过在表单控件（如gender: new FormControl('male')）内设置性别字段的静态值来检查它是否被选中。可能是this.gender 值的问题。