代码之家 › 专栏 › 技术社区 › user6321478

角度2/4需要一个Typescript正则表达式,只允许在输入文本框中输入数字

typescript angular regex javascript

user6321478 · 技术社区 · 8 年前

在我的Angular 4应用程序中,我有一个输入框,其中我只想要数字。。。输入0-9。。否则,我希望它在密钥更新时清除

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

}

是重视错误的方法?

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

7 回复 | 直到 8 年前

Pengyy 8 年前

既然您使用的是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

Jaie 8 年前

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

Sagar V 8 年前

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

JSON Derulo 8 年前

要访问输入字段的值,请使用 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

Damask 8 年前

对于这种情况,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;

Eliseo 8 年前

改进Damask的答案。如果我们使用反应形式,我需要最后一行:“this.control.control.setValue(截断);”

<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

      }
    }
  }
}

Akhil RJ 5 年前

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"/>

也在组件内部。ts,内部 formBuilder 你可以吃这样的东西

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