单选按钮没有检查角度2

问题描述：

我已经创建了两个单选按钮用于性别，我想显示之前选定的单选按钮。单选按钮没有检查角度2

我在模板

<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]'？ – guradio

单选按钮的名称和值，但我也试过没有名字。 –

答

你可以把它写像

<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

谢谢，它工作正常。 –

欢迎，乐意帮忙。 – Viplock

答

由于您使用的是动态表单，因此您可以省略输入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>

我已经试过这个，但它不工作，但我没有得到检查 –

检查通过设置像性别字段内的性别字段的静态值像性别：新的FormControl（'男'）'看看它的检查与否。可能会出现'this.gender'值。 – ranakrunal9

答

我已经找到其他的解决办法。我们可以使用下面的代码

<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>

单选按钮没有检查角度2

相关推荐