Discussion :

[Skunka]

Salut à tous,

Je travail sur un petit projet en Angular 11 et j'essaye de faire en sorte que des radios buttons soit checked par défaut mais je ne m'en sort pas!

J'ai essayé différente version tirée de différents posts stackoverflow et autres sites:
https://stackoverflow.com/questions/...ue-not-checked
https://stackoverflow.com/questions/...ton-by-default
https://stackoverflow.com/questions/...-default-value
https://stackoverflow.com/questions/...in-angular-4-0
https://www.freakyjolly.com/tag/angu.../#.X8VMBmhKiUk
https://stackoverflow.com/questions/...lar-8/57144379
https://stackoverflow.com/questions/...ist-in-angular
https://stackoverflow.com/questions/...model-for-form
https://stackoverflow.com/questions/...ked-by-default
https://stackoverflow.com/questions/...button-angular

Mais malgré tout ça, rien n'a fonctionné ! Alors soit je suis vraiment pas doué sur ce framework soit il y a une notion qui m'échappe...

Le projet est un générateur aléatoire de Tacos (à force, je ne sais plus lequel choisir !) et au chargement de la page, je souhaite que le nombre de viandes, sauces et suppléments que j'ai défini par défaut soit affiché au travers de radios buttons qui permettent à l'utilisateur de modifier le contenu de son tacos (2 viandes, 2 sauces et 1 supplément par défaut).

Le code HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<div class="tacos-app">
    <label for="eater">Mangeur du tacos: </label>
    <input type="text" id="eater">
 
    <div class="selectors-container">
        <div class="meat-selector selectors-item">
            <p>Sélectionner un nombre de viandes:</p>
 
            <div>
                <input type="radio" name="meat-quantity" id="meat-one" value="1" [(ngModel)]="meatQuantity">
                <label for="meat-one">1</label>
            </div>
 
            <div>
                <input type="radio" name="meat-quantity" id="meat-two" value="2" [(ngModel)]="meatQuantity" [checked]="true">
                <label for="meat-two">2</label>
            </div>
 
            <div>
                <input type="radio" name="meat-quantity" id="meat-three" value="3" [(ngModel)]="meatQuantity">
                <label for="meat-three">3</label>
            </div>
 
            <div>
                <input type="radio" name="meat-quantity" id="meat-vege" value="0"  [(ngModel)]="meatQuantity">
                <label for="meat-vege">Végétarien</label>
            </div>
 
        </div>
 
        <div class="sauce-selector selectors-item">
            <p>Sélectionner un nombre de sauces:</p>
 
            <div>
                <input type="radio" name="sauce-quantity" id="sauce-one" value="1" [(ngModel)]="sauceQuantity">
                <label for="sauce-one">1</label>
            </div>
 
            <div>
                <input type="radio" name="sauce-quantity" id="sauce-two" value="2" [(ngModel)]="sauceQuantity" checked>
                <label for="sauce-two">2</label>
            </div>
 
            <div>
                <input type="radio" name="sauce-quantity" id="sauce-three" value="3" [(ngModel)]="sauceQuantity">
                <label for="sauce-three">3</label>
            </div>
 
        </div>
 
        <div class="supplement-selector selectors-item">
            <p>Sélectionner un nombre de suppléments:</p>
 
            <div>
                <input type="radio" name="supplement-quantity" id="supplement-none" value="0" [(ngModel)]="supplementQuantity">
                <label for="supplement-none">Aucun</label>
            </div>
 
            <div>
                <input type="radio" name="supplement-quantity" id="supplement-one" value="1" [(ngModel)]="supplementQuantity">
                <label for="supplement-one">1</label>
            </div>
 
            <div>
                <input type="radio" name="supplement-quantity" id="supplement-two" value="2" [(ngModel)]="supplementQuantity">
                <label for="supplement-two">2</label>
            </div>
 
            <div>
                <input type="radio" name="supplement-quantity" id="supplement-three" value="3" [(ngModel)]="supplementQuantity">
                <label for="supplement-three">3</label>
            </div>
        </div>
    </div>
 
    <p>Tacos {{meatQuantity == 0 ? 'Végétarien' : meatQuantity}} viandes, {{sauceQuantity}} sauce et {{supplementQuantity}} suppléments</p>
    <button type="button" class="btn-generate-tacos" id="btn-generate" (click)="onGenerate()">Générer</button>
 
</div>

Le code Typescript:

Code ts :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Component({
  selector: 'app-tacos',
  templateUrl: './tacos.component.html',
  styleUrls: ['./tacos.component.sass']
})
export class TacosComponent implements OnInit {
 
  meats = MEATS;
  sauces = SAUCES;
  supplements = SUPPLEMENTS;
 
  meatQuantity: number = 2;
  sauceQuantity: number = 2;
  supplementQuantity: number = 1;
 
  tacosIndex: number = 0;
  tacosList: Tacos[] = [];
 
  constructor(private _elRef: ElementRef) { this.meatQuantity = 2;
    this.sauceQuantity = 2;
    this.supplementQuantity = 1;}
 
  ngOnInit(): void {
    this.meatQuantity = 2;
    this.sauceQuantity = 2;
    this.supplementQuantity = 1;
  }
}

Il y a des redondances à force mais j'ai testé chaque solution à part (html side, définition des attribut, constructor et ngOnInit) et le résultat reste similaire.

Voici ce que donne l'affichage:


Comme vous pouvez le constater, il n'y a pas de radio coché par défaut.
Quelqu'un à une idée ?

Cordialement,
Skunka.

[dukoid]

la valeur d'un input radio doit être du type string

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
...
  supplementQuantity: string = '1';
...
    this.supplementQuantity = '1';
...

parceque value du input radio s'attends à une chaine: value="1" et donc 1 est une chaine



de plus, tu peux faire l'initialisation dans le: ngOnInit

[Skunka]

Salut,

merci de ta réponse, j'ai mes input qui sont bien coché par défaut, c'est parfait!
Juste une petite conversion string -> number pour la logique du code et tout fonctionne !

Encore merci,
Skunka.