输入类型号“仅数值”验证

Question

我如何验证 type="number" 的输入仅在值是数字或 null 时才有效，仅使用响应式表单（无指令）？
只有数字 [0-9] 和 .是允许的，没有“e”或任何其他字符。

---

到目前为止我所做的尝试：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

组件：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

自定义验证器：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

Plunker

问题是当用户输入不是数字的内容时（“123e”或“abc”） FormControl 的值变为null，请记住我不想要该字段是必需的，因此如果该字段确实为空，null 值应该是有效的。

跨浏览器支持也很重要（Chrome 的数字输入字段不允许用户输入字母 - “e”除外，但 FireFox 和 Safari 可以）。

Answer 1

在 HTML 文件中，您可以像这样为您的模式添加 ngIf，

<div class="form-control-feedback" *ngIf="Mobile.errors && (Mobile.dirty || Mobile.touched)">
        <p *ngIf="Mobile.errors.pattern" class="text-danger">Number Only</p>
      </div>

在.ts 文件中，您可以添加验证器模式 -"^[0-9]*$"

this.Mobile = new FormControl('', [
  Validators.required,
  Validators.pattern("^[0-9]*$"),
  Validators.minLength(8),
]);

Answer 2

使用指令变得简单，可以在整个应用程序中使用

HTML

<input type="text" placeholder="Enter value" numbersOnly>

由于 .keyCode() 和 .which() 已弃用，代码使用 .key() 检查 转介from

指令：

@Directive({
   selector: "[numbersOnly]"
})

export class NumbersOnlyDirective {
  @Input() numbersOnly:boolean;

  navigationKeys: Array<string> = ['Backspace']; //Add keys as per requirement
  
  constructor(private _el: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
    
    if (
      // Allow: Delete, Backspace, Tab, Escape, Enter, etc
      this.navigationKeys.indexOf(e.key) > -1 || 
      (e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.key === 'a' && e.metaKey === true) || // Cmd+A (Mac)
      (e.key === 'c' && e.metaKey === true) || // Cmd+C (Mac)
      (e.key === 'v' && e.metaKey === true) || // Cmd+V (Mac)
      (e.key === 'x' && e.metaKey === true) // Cmd+X (Mac)
    ) {
        return;  // let it happen, don't do anything
    }
    // Ensure that it is a number and stop the keypress
    if (e.key === ' ' || isNaN(Number(e.key))) {
      e.preventDefault();
    }
  }
}

Answer 3

最简单的方法是使用像 one 这样的库，特别是您希望 noStrings 为真

    export class CustomValidator{   // Number only validation   
      static numeric(control: AbstractControl) {
        let val = control.value;

        const hasError = validate({val: val}, {val: {numericality: {noStrings: true}}});

        if (hasError) return null;

        return val;   
      } 
    }

Answer 4

我也遇到了类似的问题：我想要一个不需要的输入字段上的数字和 null。通过许多不同的变化工作。我终于选择了这个，这似乎可以解决问题。您将指令ntvFormValidity 放置在任何具有本机无效性且不会将该无效状态转换为 ng-invalid 的表单控件上。

示例使用： <input type="number" formControlName="num" placeholder="0" ntvFormValidity>

指令定义：

import { Directive, Host, Self, ElementRef, AfterViewInit } from '@angular/core';
import { FormControlName, FormControl, Validators } from '@angular/forms';

@Directive({
  selector: '[ntvFormValidity]'
})
export class NtvFormControlValidityDirective implements AfterViewInit {

  constructor(@Host() private cn: FormControlName, @Host() private el: ElementRef) { }

  /* 
  - Angular doesn't fire "change" events for invalid <input type="number">
  - We have to check the DOM object for browser native invalid state
  - Add custom validator that checks native invalidity
  */
  ngAfterViewInit() {
    var control: FormControl = this.cn.control;

    // Bridge native invalid to ng-invalid via Validators
    const ntvValidator = () => !this.el.nativeElement.validity.valid ? { error: "invalid" } : null;
    const v_fn = control.validator;

    control.setValidators(v_fn ? Validators.compose([v_fn, ntvValidator]) : ntvValidator);
    setTimeout(()=>control.updateValueAndValidity(), 0);
  }
}

挑战是从 FormControl 中获取 ElementRef 以便我可以检查它。我知道有@ViewChild，但我不想用 ID 注释每个数字输入字段并将其传递给其他东西。所以，我构建了一个指令，它可以请求 ElementRef。

在 Safari 上，对于上面的 HTML 示例，Angular 将表单控件标记为对“abc”等输入无效。

我认为，如果我要重新执行此操作，我可能会为数字输入字段构建自己的 CVA，因为这样可以提供更多控制并制作简单的 html。

类似这样的：

<my-input-number formControlName="num" placeholder="0">

PS：如果有更好的方法来获取指令的 FormControl，我猜想在声明中使用依赖注入和providers，请告诉我，以便我可以更新我的指令（以及这个答案）。

Answer 5

尽量减少输入，只允许从 0 到 9 的数字。这在 Angular Cli 中对我有用

<input type="number" oninput="this.value=this.value.replace(/[^\d]/,'')"  min=0>

Answer 6

进行数字验证的最简单和最有效的方法是（它也会限制空格和特殊字符）

如果你不想限制长度，你可以删除 maxlength 属性

HTML

<input type="text" maxlength="3" (keypress)="validateNo($event)"/>

TS

validateNo(e): boolean {
    const charCode = e.which ? e.which : e.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false
    }
    return true
}

Answer 7

您需要在自定义验证器中使用正则表达式。例如，下面的代码只允许输入字段中包含 9 位数字：

function ssnValidator(control: FormControl): {[key: string]: any} {
  const value: string = control.value || '';
  const valid = value.match(/^\d{9}$/);
  return valid ? null : {ssn: true};
}

在此处查看示例应用：

https://github.com/Farata/angular2typescript/tree/master/Angular4/form-samples/src/app/reactive-validator

Answer 8

有时尝试这样简单的事情会更容易。

validateNumber(control: FormControl): { [s: string]: boolean } {

  //revised to reflect null as an acceptable value 
  if (control.value === null) return null;

  // check to see if the control value is no a number
  if (isNaN(control.value)) {
    return { 'NaN': true };
  }

  return null; 
}

希望这会有所帮助。

根据评论更新， 你需要像这样调用验证器

number: new FormControl('',[this.validateNumber.bind(this)])

如果您将验证器放入组件中，则必须使用 bind(this)，这就是我的做法。