Bouton radio Angular utilisant la valeur vrai-faux

Question

J'ai remarqué que je devais utiliser [value]=true au lieu de value = true pour que mon bouton radio obtienne la valeur initiale de la classe du composant. Comment cela fonctionne-t-il - est-ce que le fait de mettre des crochets autour de value indique en quelque sorte à Angular d'utiliser la valeur initiale de [(ngModel)] ?

HTML :

<input type="radio" id ="yesChoice" [(ngModel)] ="serverDeluxe" [value]=true  >
<label for="yesChoice">Yes</label>
<br>
<input type="radio" id ="noChoice"  [(ngModel)] ="serverDeluxe" [value]=false >
<label for="noChoice">No</label>

TS :

export class ServerComponent implements OnInit{
  serverId = 10;
  serverStatus = 'offline';
  serverDeluxe = true;

  ngOnInit(): void {

  }

  getServerStatus(): string{
    return this.serverStatus;
  }
}

Answer 1

Comme l'explique le Documentation Angular :

Les parenthèses, [] indique à Angular d'évaluer l'expression du modèle. Si vous vous omettez les crochets, Angular traite la chaîne de caractères comme une constante et initialise la propriété cible avec cette chaîne :

<app-item-detail childItem="parentItem"></app-item-detail>

Si l'on omet les crochets, on obtient la chaîne suivante "parentItem" , et non la valeur de parentItem .

Dans votre cas, les crochets permettent de définir l'entrée radio comme une valeur booléenne :

[value]="true" <---- Sets the value to the boolean true
value="true"   <---- Sets the value to the string "true"

La valeur initiale de serverDeluxe est lié au contrôle avec [ngModel] (qui fait partie de [(ngModel)] ). Puisque serverDeluxe est une propriété booléenne, elle ne correspondra jamais à la chaîne de caractères "true" o "false" .

Answer 2

Le code ci-dessus fonctionne pour vous grâce à [value] propriété. Il traite la valeur comme une valeur dynamique (comme une expression de modèle), ce qui permet à html de lier l'option radio.

Si nous fournissons value=true au lieu de [value]=true nous devrons alors fournir name propriété.

Pour value=true il prendra comme value="true" et pour [value]=true comme value=true