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

Le formulaire Angular Reactive fonctionne pour la radio comme il fonctionne pour la boîte de texte d'entrée. Trouvez le code HTML ci-dessous et le composant qui utilise la boîte de texte de l'email et le bouton radio pour sélectionner l'utilisateur.

Point remarquable : formControlName doit être utilisé avec une directive formGroup parente . Votre contrôle de formulaire doit donc se lier à l'intérieur d'un groupe de formulaires.

export class AppComponent  {

      form: FormGroup;
      someError = '';

      ngOnInit() {
        this.form = new FormGroup({
          'username': new FormControl(''),
          'password': new FormControl(''),
          'radiotest': new FormControl('')
        });
      }
      reset() {
        this.form.reset();
        this.someError = '';
      }
    }

Code Html :

<form [formGroup]="form">
    <label for="email">username</label>
    <input type="email" class="form-control" formControlName = "username">
    <input type="radio" formControlName="user" value="vimal"/>Vimal
    <input type="radio" formControlName="user" value="babu"/>Babu
</form>
<button (click)="reset()">Reset</button>
<h3> {{ someError }} </h3>
<h3> {{ form.value | json }} </h3>