web-dev-qa-db-fra.com

Comment relier correctement les données aux boutons radio dans Angular2?

J'ai composant avec deux boutons radio HTML look like

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

Lorsque je clique sur Enregistrer et envoyer le modèle au serveur, la valeur sélectionnée du bouton radio est affichée du côté serveur. Et cette valeur stockée dans la base de données sans erreurs. Mais le bouton radio avec la valeur appropriée n'est pas coché après la liaison des données . Dans devTools, je vois le bouton radio Sapins:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

Deuxième bouton radio:

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

Je vois que les attributs angulaires ont changé et que le second bouton radio est coché. Mais cela n'arrive pas… .. Qu'est-ce que je fais mal?

angulardata-bindingradio-button
11
Seva

Ceci fonctionne dans mon cas. Je supprime [(ngModel)]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

et la méthode TS ressemblent à:

onProfitSelectionChange(entry): void {
    this.model.ForeignCompany.ProfitCode = entry;
}
20
Seva
<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>
0
Voodoo Savage