Angular2 - Approche pilotée par les données pour le bouton radio

Question

Je souhaite utiliser un bouton radio sous une forme utilisant Angular 2 avec une approche basée sur les données. Dans mon composant, je crée une forme comme ceci:

import { Component } from '@angular/core'; 
import {FormControl, FormGroup, Validators} from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'forms-data-driven', 
    templateUrl: 'data-driven.component.html' 
}) 
export class DataDrivenComponent { 

    myForm: FormGroup; 
    genders = ['male', 'female']; 

    constructor() { 
    this.myForm = new FormGroup({ 
     'userData': new FormGroup({ 
     'username': new FormControl('Jam', Validators.required), 
     'email': new FormControl('', [ 
      Validators.required, 
      Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]), 
     }), 
     'password': new FormControl('', Validators.required), 
     'gender': new FormControl('male'), 
    }); 
    } 

    onSubmitted() { 
    console.log(this.myForm); 
    } 
} 

et dans le code html:

<div class="radio" *ngFor="let g of genders"> 
     <label> 
      <input type="radio" 
        formGroupName="gender" 
        [value]="g" 
        > 
      {{g}} 
     </label> 
    </div> 

le problème est que les deux boutons radio peuvent être cliqués au moment. une idée?

Answer 1

Vous n'avez pas besoin d'utiliser formGroupName. Il suffit de leur donner le même nom que gender et utilisez le même formControlName. Pour le contrôle de formulaire gender, vous obtiendrez le contrôle sélectionné approprié.

<div class="radio" *ngFor="let g of genders"> 
     <label> 
      <input type="radio" name="gender" formControlName="gender" [value]="g">     
      {{g}} 
     </label> 
</div> 

Chaque contrôle de formulaire a comme ControlValueAccessor.

Les stations de radio ont leurs propres RadioControlValueAccessor, qui font la logique pour vérifier une seule radio.