Angular 2：ngModel爲布爾類型的無線電輸入綁定

在Angular 2中，我想將1組中的2個單選按鈕輸入選項綁定到布爾類型的模型屬性，但是無論我選擇哪一個的單選按鈕或運行到另一個不正確的綁定問題。我試過以下在我的HTML。Angular 2：ngModel爲布爾類型的無線電輸入綁定

*.component.html：

Error: myModel.modelProperty is always: false, no matter which radio button is selected. 

<div class="form-group"> 
     <label for="modelProperty">Model Property: </label> 
     <form action=""> 
      <input type="radio" [ngModel]="_model.modelProperty" (click)="_model.modelProperty=true" name="modelProperty" value=true>Yes<br> 
      <input type="radio" [ngModel]="_model.modelProperty" (click)="_model.modelProperty=false" name="modelProperty" value=false>No 
     </form> 
</div> 

<div>{{_model.modelProperty}}</div>

*.component.html：

Error: myModel.modelProperty is [Object object], only No radio button can be selected, if either Yes or No radio buttons is clicked. 

<div class="form-group"> 
      <label for="modelProperty">Model Property: </label> 
      <form action=""> 
       <input type="radio" [(ngModel)]="_model.modelProperty" name="modelProperty" ngValue=true>Yes<br> 
       <input type="radio" [(ngModel)]="_model.modelProperty" name="modelProperty" ngValue=false>No 
      </form> 
    </div> 

    <div>{{_model.modelProperty}}</div>

我使用以下

*.component.ts所有*.component.html以上選項：

import {Component, Input} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {Model} from './model'; 
@Component({ 
    selector: 'my-form', 
    templateUrl: 'app/.../*.component.html' 
}) 

export class *Component { 

     _model = new Model(..., false, ...); //false is the Model property: .modelProperty 

     constructor(){} 

     ... 
}

來源

2016-04-22 jerryh91

在類似的情況下，我使用[checked]而不是[ngModel]代碼的第一個版本。

此代碼的工作對我來說：

<form action=""> 
    <input type="radio" [checked]="_model.modelProperty" 
     (click)="setProperty($event.target.checked)" 
     name="modelProperty">Yes<br> 
    <input type="radio" [checked]="!_model.modelProperty" 
     (click)="setProperty(!$event.target.checked)" 
     name="modelProperty">No 
</form> 

setProperty(inChecked: boolean) { 
    this._model.modelProperty = inChecked; 
}

來源

2016-04-22 20:29:59 Picci

模型屬性值是正確的，具體取決於它們選擇的單選按鈕，但從視覺上看，單擊時單選按鈕並不總是被選中。 – jerryh91

我最近的評論有任何更新？ – jerryh91

此代碼適用於我

'和' setProperty（inChecked：boolean）{this._model.modelProperty = inChecked; }' – Picci

爲了讓您的HTML價值評估作爲一個布爾值，使用：[value]="true"

來源

2017-04-17 22:04:22 Riko

對於布爾，[(ngModel)]正在與[value]。 [(ngModel)]未能在默認情況下與value進行檢查。例如： - <input type="radio" id="idYes" name="Preferred-group" [value]="true" [(ngModel)]="IsContactPreffered">工作正常。

來源

2017-11-22 05:51:27 sijovw

Angular 2：ngModel爲布爾類型的無線電輸入綁定

回答

相關問題