2017-03-29 48 views
7

Ben iki radyo düğmeleriAngular2'deki verileri radyo düğmelerine ne kadar doğru şekilde bağlayın? i kaydetmek ve ben sunucu tarafında radyo düğmesinin geçerli seçilen değerini görmek sunucuya modelini göndermek tıkladığınızda

<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> 
        </div> 

HTML look like ile bileşeni var. Ve bu değer veritabanında hata olmadan saklanır. Ancak, uygun değerdeki radyo düğmesi, veri birleştirildikten sonra kontrol edilmez.

<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"> 

İkinci radyo düğmesi: Ben açısal özelliklerini ve ikinci radyo düğmesi kontrol edileceğini bekleyen değiştiğini görüyoruz

<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"> 

DevTools'un ise Ben köknar radyo düğmesini görüyoruz. Ama bu gerçekleşmez. Neyi yanlış yapıyorum?

+0

ngModel ve birlikte çalışmayan kontrol sen t birini kaldırmak gerekir hem. – Arash

cevap

14

Bu benim durumumda çalışır. Ben kaldırmak

<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> 
        </div> 

ve TS yöntemi göz gibi [(ngModel)]: Sen gerekmez

onProfitSelectionChange(entry): void { 
    this.model.ForeignCompany.ProfitCode = entry; 
} 
1

[(ngModel)] aynı zamanda "1 [değer] kullanmak = deneyin [işaretli] "value yerine =" 1"

<input type="radio" name="Coverage" [value]="1" [(ngModel)]="formdata.coverage_verified" />Yes