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

Question

在我的 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);

}

1. .value 是错误的方法吗？
2. 我应该使用事件 preventdefault 吗？

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

我需要做什么？

Answer 1

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

Answer 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, ''));

参考演示。

Answer 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, '');
}

Answer 4

要访问输入字段的值，请使用ngModel （文档）

对于表单验证，请查看内置工具。 如果您使用这些，您可以简单地使用 HTML 属性pattern通过正则表达式来实现对输入字段的验证。 (文档)

更新代码：

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

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

Answer 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;   

Answer 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

      }
    }
  }
}

Answer 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])],