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为布尔类型的无线电输入绑定

回答

相关问题