Angular 2/4 需要一个 Typescript 正则表达式来只允许将数字输入到输入文本框中答案

【问题标题】：Angular 2/4 need a Typescript regex to only allow numbers to be entered into input textboxAngular 2/4 需要一个 Typescript 正则表达式来只允许将数字输入到输入文本框中
【发布时间】：2018-02-03 03:51:57
【问题描述】：

在我的 Angular 4 应用程序中，我有这个输入框，我只希望在其中输入数字... 0-9 输入.. 否则我希望它清除 onkeyup

HTML

<input type="number" (keyup)="numbersOnly($event)"  placeholder="0000000000" formControlName="phone" maxlength="10"/>

上面的工作是在组件中调用这个函数但它不能防止字母。

numbersOnly(val) {
    let y = this.trackerForm.controls['phone'].value
    y.value = y.value.replace(/[^0-9.-]/g, '');

    console.log('y', y);

}

.value 是错误的方法吗？
我应该使用 event preventdefault 吗？

“y”的控制台日志显示正确。

我需要做什么？

【问题讨论】：

标签： javascript regex angular typescript

【解决方案1】：

您可能应该在输入上有一个模型，并将其与事件一起传递到您的函数中。更改模型而不是事件值。此外，您的解决方案可能无法正常工作，因为输入可能在 (keypress) 事件上更新了值。

【讨论】：

【解决方案2】：

由于您使用的是 ReactiveForm，您应该了解 FormConrtol 的值只有一个getter。

如果要更改 formControl 的值，请使用 patchValue 或 setValue。

let y = this.trackerForm.controls['phone'];
this.trackerForm.controls['phone'].patchValue(y.value.replace(/[^0-9.-]/g, ''));
// OR
this.trackerForm.controls['phone'].setValue(y.value.replace(/[^0-9.-]/g, ''));

请参考 demo。

【讨论】：

我看到你的演示工作正常，但它仍然让我输入字母并抛出错误
@JeremyMiller 这是因为你正在使用keyUp 事件，所以事件会一直触发到keyup。
那么我该如何解决
@JeremyMiller 这有点棘手，但您可以跟踪 keyCode 并使用 $event.preventDefault() 来防止输入 unnumber character，您也必须在 keydown 时执行此操作。在我的回答中查看演示，我已更新。
所以，我使用 keydown 事件，然后if (e.keyCode > 57 | e.keyCode < 48) { e.preventDefault(); }

【解决方案3】：

let y = this.trackerForm.controls['phone'].value
                                            ^^^^^
y.value = y.value.replace(/[^0-9.-]/g, '');
   ^^^^

你已经在取值了。

改成

let y = this.trackerForm.controls['phone'];
y.value = y.value.replace(/[^0-9.-]/g, '');

你改用ngModel。

<input type="number" (keyup)="numbersOnly()"  placeholder="0000000000" formControlName="phone" maxlength="10" [(ngModel)]="value"/>


value = "";
numbersOnly() {
    this.value = this.value.replace(/[^0-9.-]/g, '');
}

【讨论】：

y.value = y.value.replace(/[^0-9.-]/g, ''); Visual Studio 中的错误说无法分配值，因为它必须是常量或其他东西
更好的方法是使用ngModel 这是推荐的方法

【解决方案4】：

要访问输入字段的值，请使用ngModel (documentation)

对于表单验证，请查看built-in tools。如果您使用这些，您可以简单地使用 HTML 属性pattern 来实现通过正则表达式验证输入字段。 (documentation)

更新代码：

<input type="number" name="phoneNumber" placeholder="0000000000" pattern="[0-9.-]*" maxlength="10" [(ngModel)]="phoneNumber" #phoneNumber="ngModel"/>

请注意，您需要在组件中定义一个名为 phoneNumber 的新字段。

【讨论】：

但我不想要另一个字段，我在一个表单组中有 formcontrol，我正在使用 phone 为什么我需要创建另一个字段？

【解决方案5】：

对于这类事情，Angular 有监听来自组件的事件的指令。

如果您将输入映射到模型，那么您分配值的方式将不会反映到模型中。所以这也应该注意。

@Directive({
  selector: '[restrict]',
})
export class RestrictDirective {


  constructor(private control: NgControl) {}        

  @HostListener('keyup', ['$event.target'])
  @HostListener('paste', ['$event.target'])
  private onInputEvent(input) {
    if (input.value) {
      let truncated = input.value.replace(PATTERN, ''); //put your pattern here
      // change value only if it contains disallowed characters
      if (truncated !== input.value) {
        this.control.valueAccessor.writeValue(truncated); //write to model
        this.control.viewToModelUpdate(truncated);        //write to view       
      }
    }
  }
}

然后在输入中使用指令

<input type="text" restrict/>

对于整数，模式将是

const PATTERN = /[\D]/g;

【讨论】：

NgControl 是从哪里来的？

【解决方案6】：

改进大马士革的回答。如果我们使用响应式表单，我需要最后一行：“this.control.control.setValue(truncated);”

<input type="text" [restrict]="'[^0-9]'" />

指令

@Directive({
  selector: '[restrict]',
})
export class RestrictDirective {

  regexp:any;
  @Input('restrict') 
  set pattern(value)
  {
    this.regexp=new RegExp(value,"g");
  }

  constructor(private control: NgControl) {}        

  @HostListener('input', ['$event.target'])
  @HostListener('paste', ['$event.target'])
  private onInputEvent(input) {
    if (input.value) {
      let truncated = input.value.replace(this.regexp, ''); 
      if (truncated !== input.value) {
        this.control.valueAccessor.writeValue(truncated); //write to model
        this.control.viewToModelUpdate(truncated);        //write to view 
        this.control.control.setValue(truncated);  //send to control

      }
    }
  }
}

【讨论】：

【解决方案7】：

创建一个类似这样的简单指令

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {

  constructor() { }

  @HostListener('keypress', ['$event'])
  onInput(event: any) {
    const pattern = /[0-9]/;
    const inputChar = String.fromCharCode(event.which ? event.which : event.keyCode);

    if (!pattern.test(inputChar)) {
      event.preventDefault();
      return false;
    }
    return true;
  }

}

在你的模块中导入这个

在 HTML 中

<input type="number" appNumberOnly placeholder="0000000000" formControlName="phone" maxlength="10"/>

同样在你的component.ts里面，在formBuilder里面你可以有这样的东西

 phone: ['', Validators.compose([Validators.maxLength(10), Validators.pattern('[6-9]\\d{9}'), Validators.required])],

【讨论】：