无法通过单选按钮使用数字输入

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

创建可重用的输入

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

number-radio.input.component.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-input.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"

“值”属性的单向绑定。

如此处所述： How to get radio button value as a number