Question

我试图创建一个只允许在其中键入数字的输入，问题是this.modelChange.next(value)似乎没有被触发，除非我实际输入数字。

因为如果我输入0，那么添加一个字母0a，模型会保留在0，如果我再添加一个数字0a0，那么模型会更新并且那么输入值也是如此，因为模型已成为00。

如何确保每次输入内容时都会发生更新？

组件：

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'form-number-input',
  templateUrl: './app/assets/scripts/modules/form-controls/form-number-input/form-number-input.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-number-input/form-number-input.component.css'],
  inputs: [
    'model',
    'alt',
    'placeholder',
    'name',
    'label'
  ],
  host: {
    '(input)': 'isNum($event.target.value)'
  }
})

export class FormNumberInputComponent {
  @Input() model: number;
  @Output() modelChange: EventEmitter = new EventEmitter();

  isNum(value) {

    value = value.replace(/[^0-9.-]/g, '');

    this.modelChange.next(value);
  }
}

模板：

<div>
  <label attr.for="{{name}}">{{label}}</label>
  <input [(ngModel)]="model" type="text" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}" class="form-number-input">
</div>

用法：

<form-number-input [(model)]="myNumber" label="Number" placeholder="Write a number" alt="Number input"></form-number-input>

编辑：我找到了问题的解决方案，虽然感觉不对：

isNum(value) {

  this.modelChange.next(value);

  value = value.replace(/[^0-9]/g, '');

  this.modelChange.next(value);
}

通过调用modelChange之前和之后我们操纵值，输入和模型都会更新，但为什么这样做呢？

Angular 2数字输入

0 个答案: