Angular2 ReactiveFormsControl: wie binden radio-buttons?

Ich bin mit ReactiveFormsModule von Angular2 eine Komponente erstellen, die ein Formular enthält. Hier ist mein code:

foo.Komponente.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>

Den code, den ich oben gepostet funktioniert nicht: wenn ich auf einen der beiden radio-buttons immer wählen Sie die zweite und ich kann es nicht ändern.

Was ist der richtige Weg, um FormControl mit radio (oder checkbox)?

InformationsquelleAutor smartmouse | 2016-10-20

Für andere als string Werte, die Sie verwenden können [value] Attribut und auch [geprüft] - Attribut sollte verwendet werden, für die ursprünglichen Werte.

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>

InformationsquelleAutor Fırat KÜÇÜK

Ich gelöst hinzufügen value Eigenschaft mit zugehörigen Werte der radio Elemente:

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

Diese machen das arbeiten mit beiden [formControl] und formControlName.
(Dank an @JsIsAwesome)

InformationsquelleAutor smartmouse

0

Ändern Sie die formControl zu formControlName und legen Sie den Namen des Steuerelements.
Und vergessen Sie nicht im form-tag festgelegt [formGroup]="myForm".

Dies gut funktioniert:
```
<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: [""]
});
```
- Das funktioniert auch, aber der Grund ist nicht die Tatsache, dass Sie mit formControlName statt formControl. Danke trotzdem für Eure Antworten, Sie machen mich, um herauszufinden, was das problem war (siehe meine eigene Antwort).
InformationsquelleAutor Bazinga

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.