Angular2 Reactive Forms formControl dla przycisków radiowych

Question

Buduję formularz w Angular2 za pomocą formularzy reaktywnych. Używam FormBuilder do utworzenia grupy pól. W przypadku pól tekstowych działa to wyjątkowo dobrze. Ale nie mogę znaleźć formControl dla przycisków radiowych.

Jak to działa? Czy powinienem wykonać <input formControlName="gender" type="radio">, tak jak robię to przy wprowadzaniu tekstu?

Answer 1

Czy powinienem wykonać <input formControlName="gender" type="radio">, tak jak robię to przy wprowadzaniu tekstu?

Tak.

Jak to działa?

Dyrektywy kontroli formularzy używają dyrektywy ControlValueAccessor do komunikowania się z rodzimym elementem. Istnieją różne typy ControlValueAccessors dla każdego z możliwych wejść. Poprawny jest wybrany przez selector z dyrektywy akcesor wartości. Selektory oparte są na tym, co jest: type. Gdy masz type="radio", zostanie użyty akcesor wartości dla radia.

Answer 2

W komponentu, zdefiniować przycisk radiowy jako część swojej postaci:

export class MyComponent { 
    form: FormGroup; 
    constructor(fb: FormBuilder){ 
    this.form = fb.group({ 
     gender: "" 
    }); 
    } 
} 

W swojej komponentu HTML, zbudować swoją postać:

<div class="form-group"> 
    <label>Please select your gender</label> 
    <div class="row"> 
    <label class="md-check"> 
     <input type="radio" value="female" name="gender" formControlName="gender"> 
     Female 
    </label> 

    <label class="md-check"> 
     <input type="radio" value="male" name="gender" formControlName="gender">  
     Male 
    </label> 
    </div> 
</div> 

Zakładam, że wiesz, jak aby skonstruować cały formularz za pomocą przycisku przesyłania, którego tutaj nie widać.

Gdy formularz jest przesyłany, można uzyskać wartość przycisku radiowego tutaj:

let genderValue = this.form.value.gender; 

To będzie albo „żeńskie” lub „męskie” w zależności od tego, który przycisk radiowy jest zaznaczone.

Mam nadzieję, że to pomoże. Powodzenia!

Answer 3

Jeden mały, aby dodać o formach Reaktywnych zauważyłem. Jeżeli wartość jest liczbą całkowitą musi się zmienić na ciąg albo przycisk radiowy to przyzwyczajenie być wybrany ..

this.jobForm = this._fb.group({ 
        id: [res["job"]["id"]], 
        job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required], 
        title: [res["job"]["title"],Validators.required] 
       }); 

Answer 4

Angular Material controls są (w większości) wystarczająco dojrzałe, aby skorzystać teraz.

Ich próbki najczęściej korzystają z ngModel, ale oto jak można to zrobić za pomocą formControlName.

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem"> 
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button> 
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button> 
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button> 
</mat-radio-group> 

Używam przycisków angular/flex-layout, aby umieścić moje przyciski w pionowej kolumnie.

(można również zrobić value='Blue' na stałe lub [value]="blueColorName" odnosić się do właściwości modelu.

wierzę, że może być problem z 0 ponieważ nie jest to „truthy” wartość więc uważaj, jeśli” ponowne wiązanie z wyliczeniami (może już nie być problemem).