web-dev-qa-db-fra.com

Angular2 comment définir le bouton radio comme coché avec une valeur par défaut

Je suis nouveau sur Angular2, j'ai un groupe de radio et j'essaie de le lier en utilisant [(ngModel)] à entity person.testBoolean afin que je puisse l'enregistrer dans la base de données. Je veux définir une valeur par défaut comme sélectionné et j'ai vu peu d'exemples et constaté qu'ils définissaient la valeur par défaut à [(ngModel)], mais dans mon cas, je veux la lier à mon entité, donc je ne peux pas utiliser [(ngModel)] . Quelqu'un peut-il conseiller des options alternatives. vérifié = idx ne fonctionne pas.

<div class="form-group">
    <label for="radioboolean">Boolean: </label>
    <div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
       <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="idx === 1" [value]="entry.id" />{{ entry.description }}
    </div>
</div>

Code Ts:

 entries = [
              {id: 1, description: 'True' },
              {id: 2,description: 'False'},
              {id: 3,description: 'Undefined'}
           ];

La personne est mon entité:

export interface IPerson {

    id: string;
    name: string;
    testNumber: number | null;
    testDatetime: Date | null;
    testBoolean: boolean | null;
    // Refs to parent entities
    team: ITeam;
    teamId: string;

};
angularangular2-forms
3
Auo

Vous pouvez utiliser l'identifiant d'entrée comme ceci: [checked]="entry.id === 1"

<div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
                <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="entry.id === 1" [value]="entry.id" />{{ entry.description }}
            </div>
5
Swoox

Si vous souhaitez toujours que le premier élément soit sélectionné, vous pouvez l'utiliser.

Dans votre boucle - * ngFor = "laissez l’entrée des entrées; laissez la première = première;

et dans votre groupe de boutons radio - [vérifié] = "premier"

par exemple:

<div *ngFor="let entry of entries; let first = first; let idx = index" class="radio-inline" >
<input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="first" [value]="entry.id" />{{ entry.description }}
</div>
1
Duncan Faulkner

Un exemple: Dans le fichier modèle:

 <form [formGroup]="formGender">
        <input type="radio" value="1" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">MALE</span>
        <input type="radio" value="0" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">FEMALE</span>
 </form>

Dans le fichier Component.ts:

ngOnInit() {
    this.userBasicInformation.gender = '0';
}

Et le résultat, le bouton radio sélectionnera par défaut une valeur de sexe = 0 (Femme) comme image suivante:

 enter image description here

0
Hai Dinh