web-dev-qa-db-fra.com

Formulaire de formulaire réactif angulaire2 pour les boutons radio

Je construis une forme dans Angular avec des formes réactives. J'utilise FormBuilder pour créer un groupe de champs. Pour les zones de texte, cela fonctionne extrêmement bien. Mais je ne trouve pas formControl pour les boutons radio.

Comment cela marche-t-il? Devrais-je utiliser <input formControlName="gender" type="radio"> Comme avec les saisies de texte?

angularangular-reactive-formsangular-forms
35
Mike Bovenlander

Devrais-je <input formControlName="gender" type="radio"> comme je le fais avec la saisie de texte?

Oui.

Comment cela marche-t-il?

Les directives de contrôle de formulaire utilisent une directive ControlValueAccessor pour communiquer avec l'élément natif. Il existe différents types de ControlValueAccessors pour chacune des entrées possibles. Le bon est choisi par le selector de la directive accesseur de valeur. Les sélecteurs sont basés sur ce que type le <input> est. Lorsque vous avez type="radio", alors l’accesseur de valeur pour les radios sera utilisé.

32
Paul Samsotha

Dans votre composant, définissez votre bouton radio dans le cadre 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 en entier avec votre bouton d'envoi, ce qui n'est pas indiqué ici.

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

let genderValue = this.form.value.gender;

Ce sera soit "femme" ou "homme" en fonction du bouton radio coché.

J'espère que cela vous aide. Bonne chance!

35
Chang

Une petite chose à ajouter à propos des formes réactives que j'ai remarquées. Si la valeur est un entier, il doit être changé en chaîne, 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]
                });
6
Cliff

Les contrôles de matériaux angulaires sont (pour la plupart) suffisamment matures pour être utilisés maintenant.

Leurs exemples utilisent principalement ngModel, mais voici comment procéder 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.

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

Je crois qu'il peut y avoir un problème avec 0 _ parce que ce n'est pas une valeur 'vérité', alors faites attention si vous êtes contraignant pour des enums (peut ne plus être un problème).

2
Simon_Weaver