web-dev-qa-db-fra.com

Angular 5 Formes réactives - Groupe de boutons radio

J'ai 2 boutons radio, j'utilise des formulaires réactifs et j'ai ajouté les contrôles de formulaire dans mon composant. Le problème auquel je suis confronté est que l'attribut name doit être identique à formControlName. Lorsque je mets l’attribut name comme identique, je ne peux sélectionner qu’un seul bouton radio - je ne peux jamais désélectionner ni sélectionner l’autre. Me permet seulement de sélectionner le même.

this.genderControl = new FormControl("", Validators.required);

puis ajouté à mon groupe de formulaires

genderControl: this.genderControl,

Mon HTML:

<div class="radio-inline">
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label"> Male</label>
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label">Female</label>
</div>

Groupe de formulaire

    this.personalInfo = new FormGroup({
  searchControl: this.searchControl,
  titleControl: this.titleControl,
  firstNameControl: this.firstNameControl,
  middleNameControl: this.middleNameControl,
  lastNameControl: this.lastNameControl,
  birthdayControl: this.birthdayControl,
  genderControl: this.genderControl,
  phoneControl: this.phoneControl,
  taxCanadaControl: this.taxCanadaControl,
  provinceControl: this.provinceControl,
  countryControl: this.countryControl,
  taxCountryControl: this.taxCountryControl,

  creditControl: this.creditControl
});
angularangular5angular-reactive-forms
19
Taranjit Kang

J'ai essayé votre code, vous n'avez pas assigné/lié une valeur à votre formControlName.

En fichier HTML:

<form [formGroup]="form">
   <label>
     <input type="radio" value="Male" formControlName="gender">
       <span>male</span>
   </label>
   <label>
     <input type="radio" value="Female" formControlName="gender">
       <span>female</span>
   </label>
</form>

Dans le fichier TS:

  form: FormGroup;
  constructor(fb: FormBuilder) {
    this.name = 'Angular2'
    this.form = fb.group({
      gender: ['', Validators.required]
    });
  }

Assurez-vous d'utiliser correctement le formulaire réactif: [formGroup]="form" et vous n'avez pas besoin de l'attribut name.

Dans mon échantillon. mots male et female dans les balises span sont les valeurs affichées le long du bouton radio et Male et Female les valeurs sont liées à formControlName

Voir la capture d'écran: enter image description here

Pour le rendre plus court:

<form [formGroup]="form">
  <input type="radio" value='Male' formControlName="gender" >Male
  <input type="radio" value='Female' formControlName="gender">Female
</form>

enter image description here

J'espère que ça aide:)

46
Haifeng Zhang