Question

我应该能够输入字母数字值或仅输入字母。我需要在角度4中进行验证的模式

Answer 1

只需使用isNaN(input.value)。

如果返回true，则表示您很好。如果不是，那只是数字。

Answer 2

您可以创建自定义attribute directive来防止使用字母。

我已经在Stackblitz上创建了一个演示

components.html

<form [formGroup]="myForm">
    <input type="text" OnlyNumber placeholder="Enter postal code" formControlName="postalCode" />
  <p>{{myForm.get('postalCode').value}}</p>
</form>

components.ts

myForm: FormGroup;
  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {

    this.myForm = this.fb.group({
      postalCode: [null, Validators.required]
    });
}

only-number.directive.ts

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

@Directive({
    selector: '[OnlyNumber]'
})
export class OnlyNumberDirective {

    constructor(private el: ElementRef) { }

    @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
        let e = <KeyboardEvent>event;
        /* 
            8 -  for backspace
            9 -  for tab
            13 - for enter
            27 - for escape
            46 - for delete
        */
        if ([8, 9, 13, 27, 46].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    }

    @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
        this.validateFields(event);
    }
    validateFields(event) {
        setTimeout(() => {
            let numberRegEx = /^[0-9]+$/;
            if(!numberRegEx.test(this.el.nativeElement.value)){
                this.el.nativeElement.value = "";
                event.preventDefault();
            }
        }, 100)
    }
}

Answer 3

如果仅使用 HTML ，则可以这样设置输入类型：

<input type="number" />

但是您可以在 javascript 中使用正则表达式，如下所示： '/[a-zA-Z]/' 或...

如何防止用户在输入字段中仅输入数字

3 个答案: