无法将数字输入与单选按钮一起使用

Question

下面显示了字符串值是有效的，但是如果我的输入是数字，它就不起作用。除了把变量变成字符串之外，还有什么想法吗？

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<p>Model: {{model | json}}</p>
NOT WORKING<br/>
<input type="radio" name="foo" value="1" [(ngModel)]="model.foo" kendoRadioButton />
<input type="radio" name="foo" value="2" [(ngModel)]="model.foo" kendoRadioButton />
<input type="radio" name="foo" value="3" [(ngModel)]="model.foo" kendoRadioButton />
<br/>
WORKING<br/>
<input type="radio" name="bar" value="1" [(ngModel)]="model.bar" kendoRadioButton />
<input type="radio" name="bar" value="2" [(ngModel)]="model.bar" kendoRadioButton />
<input type="radio" name="bar" value="3" [(ngModel)]="model.bar" kendoRadioButton />
`
})
export class AppComponent {
public model = {
foo: 3,
bar: "2"
};
}

Answer 1

您可以通过字符串化设置和处理更改事件来自己实现双向绑定，而不是使用[(ngModel)]进行双向绑定。

数字类型的每个输入看起来如下：

<input type="radio" name="foo" value="1" kendoRadioButton
[ngModel]="model.foo.toString()" 
(ngModelChange)="onFooChanged($event)" />

组件中的事件处理程序如下所示：

onFooChanged(value) {
this.model.foo = parseInt(value);
}

在不知道[(ngModel)]幕后发生了什么的情况下，我认为它正在对单选按钮等布尔类型进行严格的相等性检查。

演示：https://stackblitz.com/edit/angular-w3xwmx

创建可重复使用的输入

如果你有几个这样的属性，那么为每个属性创建一个事件处理程序会很快变得乏味。或者，您可以创建自己的组件来封装此功能。

数字无线电输入组件.ts

import { Component, Input, forwardRef, ChangeDetectorRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Component({
selector: 'number-radio-input',
templateUrl: './number-radio-input.component.html',
providers: [
{ provide: NG_VALUE_ACCESSOR, 
useExisting: forwardRef(() => NumberRadioInputComponent), 
multi: true }
]
})
export class NumberRadioInputComponent implements ControlValueAccessor {  
@Input() name: string;
@Input() value: string;
model: string;
private _value: number;
private onChangeCallback: (value: number) => void = () => { };
onModelChange(): void {
this._value = parseInt(this.model, 10);
this.onChangeCallback(this._value);
}
registerOnChange(fn: (value: number) => void): void {
this.onChangeCallback = fn;
}
registerOnTouched(fn: any): void {}
writeValue(val: number): void {
this._value = val;
this.model = val ? val.toString() : '';
}
}

number-radio-put.component.html

<input type="radio" [name]="name"
[value]="value"
[(ngModel)]="model" (ngModelChange)="onModelChange()" />

component.html

<number-radio-input [(ngModel)]="model.foo" value="1" name="foo">
</number-radio-input>

如果您想以不同的方式配置输入，则需要传入其他属性，但至少这将允许您直接绑定到模型。

Answer 2

只需使用

[value]="1"

单向绑定在"；值"；所有物

如下所述：如何将单选按钮值作为数字