如何使用 ngControl (AngularJS2) 实现单选按钮?
How to implement radio buttons with ngControl (AngularJS2)?
我有一个关于如何使用 ngControl 在我的表单中实现单选按钮的问题
模板代码如下:
<div class="form-group">
<label class="radio-inline" *ngFor="#size of formModel.sizes">
<input type="radio" ngControl="ourSize" #ourSize="ngForm" value="{{ size }}" >
{{ size }}
</label>
</div>
模型代码如下:
this.formModel = {
sizes: ['asd1', 'asd2', 'asd3']
}
我有这样的错误:
P.S。我已经检查了另一个答案 Angular2 - Radio Button Binding
但这对我没有帮助(
您需要这样使用收音机输入:
@Component({
selector: 'my-app',
template: `
<form>
<div class="form-group">
<label class="radio-inline" *ngFor="#size of formModel.sizes; #i=index">
<input type="radio" [(ngModel)]="formModel.sizes[i]" #ctrl="ngForm" ngControl="sizeCtrl" name="size"/>
{{ size.value }}
</label>
</div>
Test: {{ctrl?.value}}
Values: {{formModel | json}}
</form>
`
})
export class AppComponent {
constructor() {
this.formModel = {
sizes: [
new RadioButtonState(true, 'asd1'),
new RadioButtonState(false, 'asd2'),
new RadioButtonState(false, 'asd3')
]
};
}
}
单选按钮状态根据所选内容更新。这个级别好像不能用控件...
请看这个 plunkr:https://plnkr.co/edit/kHJyq3N5ZtoNyAPz6Kbc?p=preview
我有一个关于如何使用 ngControl 在我的表单中实现单选按钮的问题
模板代码如下:
<div class="form-group">
<label class="radio-inline" *ngFor="#size of formModel.sizes">
<input type="radio" ngControl="ourSize" #ourSize="ngForm" value="{{ size }}" >
{{ size }}
</label>
</div>
模型代码如下:
this.formModel = {
sizes: ['asd1', 'asd2', 'asd3']
}
我有这样的错误:
P.S。我已经检查了另一个答案 Angular2 - Radio Button Binding 但这对我没有帮助(
您需要这样使用收音机输入:
@Component({
selector: 'my-app',
template: `
<form>
<div class="form-group">
<label class="radio-inline" *ngFor="#size of formModel.sizes; #i=index">
<input type="radio" [(ngModel)]="formModel.sizes[i]" #ctrl="ngForm" ngControl="sizeCtrl" name="size"/>
{{ size.value }}
</label>
</div>
Test: {{ctrl?.value}}
Values: {{formModel | json}}
</form>
`
})
export class AppComponent {
constructor() {
this.formModel = {
sizes: [
new RadioButtonState(true, 'asd1'),
new RadioButtonState(false, 'asd2'),
new RadioButtonState(false, 'asd3')
]
};
}
}
单选按钮状态根据所选内容更新。这个级别好像不能用控件...
请看这个 plunkr:https://plnkr.co/edit/kHJyq3N5ZtoNyAPz6Kbc?p=preview