Wie Radio-Button-Wert mit reaktiven Formular festlegen?

Question

Hier ist meine Komponentenklasse, wo ich versuche, ein Formular Optionsfeld Wert auf 1 zu setzen:

import { FormGroup, FormControl } from '@angular/forms'; 

export class myComponent implements OnInit{ 
    pageForm: FormGroup; 

    ngOnInit() { 
     this.pageForm = new FormGroup({ 
      'gndr': new FormControl(1) 
     }); 
    } 
} 

aber wenn die Seite geladen wird die Radiotaste nach Malen nicht gesetzt und beide Optionen sind leer:

<div class="form-group"> 
    <label for="gender">Gender</label> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gndr" formControlName="gndr" value=1>Male 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
      <input type="radio" name="gndr" formControlName="gndr" value=0>Female 
     </label> 
    </div> 
</div> 

Wie kann ich Radio Button-Wert von meiner Komponente Klasse laden?

Answer 1

Wenn Sie möchten, dass eine dieser Optionen standardmäßig manuell überprüft wird, können Sie das Tag "checked" hinzufügen, z.

<div class="radio"> 
    <label> 
     <input type="radio" name="gndr" formControlName="gndr" value=1 checked>Male 
    </label> 
</div> 
<div class="radio"> 
    <label> 
     <input type="radio" name="gndr" formControlName="gndr" value=0>Female 
    </label> 
</div> 

bearbeiten

Wenn Sie den Standardwert von Typ string, setzen in der Formcontrol verwenden möchten:

component.ts

this.pageForm = new FormGroup({ 
     'gndr': new FormControl('1') 
    }); 

component.html

... 
<input type="radio" formControlName="gndr" value=1> 
... 

Wenn Sie den Standardwert ab Typennummer verwenden, in der Formcontrol gesetzt:

component.ts

this.pageForm = new FormGroup({ 
     'gndr': new FormControl(1) 
    }); 

component.html

... 
<input type="radio" formControlName="gndr" [value]=1> 
...