Angulaire 4 par défaut du bouton radio coché par défaut

Je suis en train de marquer comme un défaut, une case d'option en fonction de la valeur que je reçois de mon objet, il peut être Vrai ou Faux. Que pouvais-je faire à la marque en tant que par défaut d'un bouton radio en fonction de l'option?

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="true" 
        [(ngModel)]="rule.mode"> all of the following conditions are true
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="false"
        [(ngModel)]="rule.mode"> at least one of the following conditions is true
</label>

J'ai le vrai ou faux ensemble dans rule.mode.

[attr.vérifié]="le rôle.mode"
ceci est une réponse correcte, parfait pour 'init' la définition de la valeur. merci!
Exemple d'application ici freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

OriginalL'auteur XGuy | 2017-05-04

  1. 46

    Vous pouvez utiliser [(ngModel)], mais vous devrez mettre à jour votre value à [value] sinon, la valeur est l'évaluation comme une chaîne de caractères. Il devrait ressembler à ceci:

    <label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="true" [(ngModel)]="rule.mode">
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>

    Si rule.mode est vrai, alors que la radio est sélectionnée. Si c'est faux, puis de l'autre.

    La différence vient vraiment à le value. value="true" vraiment évalue à la chaîne "true", alors que [value]="true" renvoie le booléen vrai.

    Merci man, il fonctionne ^^
    Merci , vous avez sauvé ma journée !!
    Dans le cas où vous voulez toujours la valeur 'true' en tant que chaîne et cochée par défaut, vous devez définir la valeur de la règle.mode en tant que valeur par défaut.
    On dirait que vous êtes en utilisant ngModel sur le même champ de formulaire comme formControlName. Support de l'utilisation de la ngModel entrée de la propriété et ngModelChange événement avec réactif formulaire de directives a été dépréciée dans Angulaire v6 et sera supprimée dans Angulaire v7. Pour plus d'informations, reportez-vous à notre API docs ici: angulaire.io/api/formes/FormControlName#utilisation-avec-ngmodel
    Merci pour la réponse et l'explication. J'ai fait la même chose que la propriété de mon bouton radio est de type nombre. Sans la propriété de liaison sur la valeur qu'il a été évalué comme une chaîne de caractères au lieu d'un nombre et de la valeur par défaut bouton radio n'a pas été vérifié.

    OriginalL'auteur Tyler Jennings

  2. 4

    Nous pouvons utiliser [(ngModel)] manière suivante et ont une valeur de sélection de variable radioSelected

    Exemple tutoriel

    DémoLien

    app.component.html

      <div class="text-center mt-5">
  <h4>Selected value is {{radioSel.name}}</h4>

  <div>
    <ul class="list-group">
          <li class="list-group-item"  *ngFor="let item of itemsList">
            <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)"/> 
            {{item.name}}

          </li>
    </ul>
  </div>


  <h5>{{radioSelectedString}}</h5>

  </div>

    app.composante.ts

      import {Item} from '../app/item';
  import {ITEMS} from '../app/mock-data';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
    radioSel:any;
    radioSelected:string;
    radioSelectedString:string;
    itemsList: Item[] = ITEMS;


      constructor() {
        this.itemsList = ITEMS;
        //Selecting Default Radio item here
        this.radioSelected = "item_3";
        this.getSelecteditem();
      }

      //Get row item from array  
      getSelecteditem(){
        this.radioSel = ITEMS.find(Item => Item.value === this.radioSelected);
        this.radioSelectedString = JSON.stringify(this.radioSel);
      }
      //Radio Change Event
      onItemChange(item){
        this.getSelecteditem();
      }

  }

    Échantillon de Données pour l'Inscription de

            export const ITEMS: Item[] = [
            {
                name:'Item 1',
                value:'item_1'
            },
            {
                name:'Item 2',
                value:'item_2'
            },
            {
                name:'Item 3',
                value:'item_3'
            },
            {
                name:'Item 4',
                value:'item_4'
                },
                {
                    name:'Item 5',
                    value:'item_5'
                }
        ];

    OriginalL'auteur Code Spy