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