Angular2 ReactiveFormsControl: Wie binden Sie Optionsfelder?

Question

Ich verwende ReactiveFormsModule von Angular2, um eine Komponente zu erstellen, die ein Formular enthält. Hier ist mein Code:

foo.component.ts

constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'name': ['', Validators.required], 
     'surname': ['', Validators.required], 
     'gender': [] 
    }); 
} 

foo.component.html

<div class="two fields"> 
    <div class="four wide field"> 
     <label>Name*</label> 
     <input type="text" [formControl]="myForm.controls.name"/> 
    </div> 

    <div class="four wide field"> 
     <label>Surname*</label> 
     <input type="text" [formControl]="myForm.controls.surname"/> 
    </div> 
</div> 

<div class="inline fields"> 
    <label for="gender">Gender</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Male</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Female</label> 
     </div> 
    </div> 
</div> 

Der Code i oben gepostet funktioniert nicht: wenn ich klicken auf einem der beiden radiotasten wählt man immer den zweiten und ich kann es nicht ändern.

Was ist der richtige Weg FormControl mit radio (oder checkbox) zu verwenden?

Answer 1

Ändern Sie das formControl zu formControlName, und legen Sie den Steuerelementname fest. Und vergessen Sie nicht in Ihrem Formular-Tag zu setzen [formGroup] = "myForm".

Dies funktioniert gut:

<form novalidate [formGroup]="myForm"> 
    <input type="radio" value="male" formControlName="gender" name="gender"> 
    <input type="radio" value="female" formControlName="gender" name="gender"> 
</form> 

this.myForm= this.fb.group({ 
    gender: [""] 
}); 

Answer 2

I value Eigenschaft mit ähnlichen Werten zu den radio Elemente ausgewertete Zugabe:

<div class="inline fields"> 
    <label for="gender">Gender</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" value="male" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Male</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
      <input type="radio" name="gender" value="female" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> 
      <label>Female</label> 
     </div> 
    </div> 
</div> 

Dieses es sowohl mit [formControl] und formControlName Arbeit machen. (Dank @JsIsAwesome)

Answer 3

Für andere als String Werte können Sie [Wert] verwenden Attribut und auch [geprüft] Attribut sollte für Anfangswerte verwendet werden.

export enum Gender { 
    FEMALE = 1, 
    MALE = 2 
} 

export class SampleGenderComponent implements OnInit { 

    public form: FormGroup; 
    public Gender = Gender; 

    constructor(fb: FormBuilder) { 

    this.form = fb.group({ 
     gender : [ 
     Gender.FEMALE, 
     [] 
     ] 
    }); 
    } 
} 

<div class="inline fields"> 
    <label for="gender">Gender</label> 
    <div class="field"> 
    <div class="ui radio checkbox"> 
     <input type="radio" name="gender" [value]="Gender.MALE" [checked]="form.controls['gender'].value === Gender.MALE"> 
     <label>Male</label> 
    </div> 
    </div> 
    <div class="field"> 
    <div class="ui radio checkbox"> 
     <input type="radio" name="gender" [value]="Gender.FEMALE" [checked]="form.controls['gender'].value === Gender.FEMALE"> 
     <label>Female</label> 
    </div> 
    </div> 
</div>