アングル2でラジオボタンがチェックされていません

Question

性別のラジオボタンが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) 
}); 

その他の値が表示されつつあるが、ラジオボタンがチェックなっていません。

Answer 1

あなたは、私が他の解決策を発見したPLUNK here

Answer 2

リアクティブフォームを使用している場合は、入力時に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> 

Answer 3

を探すそれはあなた

のために働く必要があり

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

のようにそれを書くことができます。以下のコードを使用できます

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