How can I bind 2 radio button input options in Angular 2 to a boolean model property without encountering binding issues?
*.component.html:
Issue: Unable to select one of the radio buttons, always getting false for myModel.modelProperty.
<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:
Issue: Getting [Object object] for myModel.modelProperty, only able to select No radio button.
<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>
Using the following:
*.component.ts for all *.component.html options above:
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(){}
...
}