Góc 2: ngModel ràng buộc cho đầu vào radio của kiểu boolean

Question

Trong Góc 2, tôi muốn kết hợp 2 tùy chọn đầu vào nút radio trong 1 nhóm thành thuộc tính mô hình của kiểu boolean, tuy nhiên tôi không thể chọn các nút radio hoặc chạy vào một vấn đề ràng buộc không chính xác khác. Tôi đã thử những điều sau đây trong html của tôi.

*.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> 

Tôi đang sử dụng sau

*.component.ts cho tất cả *.component.html tùy chọn ở trên:

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(){} 

     ... 
} 

Answer 1

Trong các trường hợp tương tự, tôi sử dụng phiên bản mã đầu tiên của bạn với [checked] thay vì [ngModel].

Mã này làm việc cho tôi:

<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; 
} 

Answer 2

Để có được giá trị html của bạn để đánh giá như một boolean, sử dụng: [value]="true"

Answer 3

Đối boolean, [(ngModel)] đang làm việc với [value]. [(ngModel)] không thể kiểm tra theo mặc định với value. Ví dụ: - <input type="radio" id="idYes" name="Preferred-group" [value]="true" [(ngModel)]="IsContactPreffered"> hoạt động tốt.