Angular2 Reactive Forms formControl pour boutons radio

Question

Je construis un formulaire en Angular avec Reactive Forms. J'utilise le FormBuilder pour créer un groupe de champs. Pour les zones de texte, cela fonctionne très bien. Mais je ne trouve pas de formControl pour les boutons radio.

Comment cela fonctionne-t-il ? Dois-je utiliser <input formControlName="gender" type="radio"> comme je le fais pour les entrées de texte ?

Answer 1

Dans votre composant, définissez votre bouton radio comme faisant partie de votre formulaire :

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

Dans votre composant HTML, construisez votre formulaire :

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

Je suppose que vous savez comment construire le formulaire entier avec votre bouton de soumission, qui n'est pas montré ici.

Lorsque le formulaire est soumis, vous pouvez obtenir la valeur du bouton radio ici :

let genderValue = this.form.value.gender;

Il s'agira d'une "femme" ou d'un "homme", selon le bouton radio coché.

J'espère que cela vous aidera. Je vous souhaite bonne chance !

Answer 2

Dois-je faire <input formControlName="gender" type="radio"> comme je le fais pour les entrées de texte ?

Oui.

Comment cela fonctionne-t-il ?

Les directives de contrôle de formulaire utilisent un ControlValueAccessor pour communiquer avec l'élément natif. Il existe différents types de ControlValueAccessors pour chacune des entrées possibles. La bonne est choisie par le selector de la directive d'accès à la valeur. Les sélecteurs sont basés sur ce que type el <input> est. Lorsque vous avez type="radio" , l'accesseur de valeur pour les radios sera utilisé.

Answer 3

J'ai remarqué une petite chose à ajouter à propos des formulaires réactifs. Si la valeur est un entier, elle doit être transformée en chaîne de caractères, sinon le bouton radio ne sera pas sélectionné.

  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

Contrôles des matériaux angulaires sont (pour la plupart) suffisamment mûrs pour être utilisés aujourd'hui.

Leurs exemples utilisent principalement ngModel, mais voici comment vous pouvez le faire avec 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>

J'utilise angular/flex-layout pour placer mes boutons dans une colonne verticale.

(On aurait également pu faire value='Blue' pour une constante ou [value]="blueColorName" pour faire référence à une propriété du modèle.

Je crois qu'il y a un problème avec 0 car ce n'est pas une valeur "vraie", donc attention si vous vous liez à des enums (ce n'est peut-être plus un problème).

Answer 5

  <form [formGroup]="form" >
    <div class="row" style="margin-left: 20px; margin-bottom: 13px;">
      <label class="colmn radio" style="font-size: 17px;text-transform: capitalize;">
        <input type="radio" value="false" name="filter" formControlName="filter">
            Daily
        <span class="checkmark"></span>
      </label>

      <label class="colmn radio" style="font-size: 17px;text-transform: capitalize;margin-left: 56px">
        <input type="radio" value="true" name="filter" [checked]="true" formControlName="filter">     
            Monthly
        <span class="checkmark"></span>
      </label>

    </div>
  </form>

  form: FormGroup;

  constructor(    private _fb: FormBuilder,
   ) {

    this.form = _fb.group({
      filter: false
    });

    this.__filterChangeSubscription =  this.form.get('filter').valueChanges.subscribe(
      filterValue => {
        console.log(filterValue)
      }
    )
  }