web-dev-qa-db-fra.com

Comment définir la valeur du bouton radio en utilisant le formulaire réactif?

Voici ma classe de composants où j'essaie de définir une valeur de bouton radio de formulaire à 1:

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

export class myComponent implements OnInit{
    pageForm: FormGroup;

    ngOnInit() {
        this.pageForm = new FormGroup({
            'gndr': new FormControl(1)
        });
    }
}

mais lorsque la page est chargée, le bouton radio n'est pas défini sur Homme et les deux options sont vides:

<div class="form-group">
    <label for="gender">Gender</label>
    <div class="radio">
        <label>
            <input type="radio" name="gndr" formControlName="gndr" value=1>Male
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="gndr" formControlName="gndr" value=0>Female
        </label>
    </div>
</div>

alors comment puis-je charger la valeur du bouton radio à partir de ma classe de composants?

angulartypescriptangular2-forms
8
John Glabb

Si vous souhaitez que l'un d'eux soit vérifié manuellement par défaut, vous pouvez ajouter la balise "vérifié", par ex.

<div class="radio">
    <label>
        <input type="radio" name="gndr" formControlName="gndr" value=1 checked>Male
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="gndr" formControlName="gndr" value=0>Female
    </label>
</div>

Modifier

Si vous souhaitez utiliser la valeur par défaut à partir de la chaîne de type , définissez dans FormControl:

component.ts

this.pageForm = new FormGroup({
      'gndr': new FormControl('1')
    });

component.html

...
<input type="radio" formControlName="gndr" value=1>
...

Si vous souhaitez utiliser la valeur par défaut à partir du numéro de type , définissez-le dans FormControl:

component.ts

this.pageForm = new FormGroup({
      'gndr': new FormControl(1)
    });

component.html

...
<input type="radio" formControlName="gndr" [value]=1>
...
14
Andresson