javascript - 单选按钮未在 Angular 2 中检查

Question

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

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

<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)
});

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

Answer 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