Angular 2自定义数字和小数值验证

Question

Angular 2自定义数字和小数值验证

9

我有一个自定义验证器，用于检查输入字段是否输入了数字。

代码如下：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class NumberValidators {

  static isNumberCheck(): ValidatorFn {
    return  (c: AbstractControl): {[key: string]: boolean} | null => {
      if (c.value !== undefined && (isNaN(c.value))) {
        return { 'value': true };
      }

      return null;
    };
  }
}

但是我的问题是，当我输入一个小数时，它会引发验证标志，而我不想要这样的结果。我希望输入字段可以包含整数和小数。请有经验的朋友帮忙解决一下。

以下是我使用parsleyjs进行验证的模板代码。

<div class="form-group row">
              <label for="upperbeltposition" class="col-md-6 col-form-label">Upper Belt Position (mm) <span class="required">*</span></label>
              <div class="col-md-5">
                <input class="form-control input-transparent " id="upperbeltposition" type="text" formControlName="upperbeltposition"  data-parsley-trigger="blur"
                  required="required" data-parsley-type="number"/>
              </div>
            </div>
             <div class="form-group row">
              <label for="platformxposition" class="col-md-6 col-form-label">Platform X Position (mm) <span class="required">*</span></label>
              <div class="col-md-5">
                <input class="form-control input-transparent " id="platformxposition" type="text" formControlName="platformxposition"  data-parsley-trigger="blur"
                  required="required" data-parsley-type="number"/>
              </div>
            </div>
             <div class="form-group row">
              <label for="platformyposition" class="col-md-6 col-form-label">Platform Y Position (mm) <span class="required">*</span></label>
              <div class="col-md-5">
                <input class="form-control input-transparent " id="platformyposition" type="text" formControlName="platformyposition"  data-parsley-trigger="blur"
                  required="required" data-parsley-type="number"/>
              </div>
            </div>

我正在使用响应式表单来编写我的组件，以下是我的代码：

upperbeltposition: ['', [Validators.required, NumberValidators.isNumberCheck]],
platformxposition: ['', [Validators.required, NumberValidators.isNumberCheck]],
platformyposition: ['', [Validators.required, NumberValidators.isNumberCheck]]

thanks!!

- ZAJ

这里有一篇关于使用NaN的详细说明：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN。那里面的内容可能会有所帮助。根据这个参考资料，isNaN应该对于十进制数返回false。 - DeborahK

所以，我需要移除那个isNaN函数以允许整数和小数。 - ZAJ

4个回答

8

可以使用ng-pattern进行验证

  ng-pattern="^[0-9]+(.[0-9]{0,2})?$"

您能否检查一下像这样

  <label for="upperbeltposition" 
   class="col-md-6 col-form-label" 
   name="number">
     Upper Belt 
     Position (mm)
      <span class="required">*</span>
  </label>
   <div class="col-md-5">
   <input 
    class="form-control input-transparent " 
    id="upperbeltposition" 
    type="text" 
    formControlName="upperbeltposition"  
     data-parsley-trigger="blur"
    required="required" 
    data-parsley-type="number"/> 
    <span  
     ng-show="submitForm && platformxposition 
      .number.$error.pattern">This value should be a valid number
   </span>

  </div>

你必须添加你的表单名称和输入字段名称。$error.pattern

- Kondal

6

除了创建自定义验证器之外，您还可以直接使用Validators.pattern。

https://angular.io/api/forms/Validators#pattern：

[''，[Validators.required，Validators.pattern（/ ^ [.\d] + $ /）]]

- pbre

看起来运行良好。我使用这个模式用于非负整数或小数: Validators.pattern(/^[+]?([0-9]+(?:[.][0-9]*)?|.[0-9]+)$/) - Rich

-1

有点晚了，但也许对其他人有帮助。

这个正则表达式将检查十进制值的有效性：

^[-+]?([1-9]{1}\d*|0{1})(\.?)(?(2)\d+)$

以下数值/模式是有效的：

123.7897
12
0.4897
+238.345
-238.345

以00开头的值是无效的，尽管00在技术上是一个数字/十进制数，但在功能上它不是。

在模式验证器或您自己的验证器中使用此正则表达式。

Validators.pattern(/^[-+]?([1-9]{1}\d*|0{1})(\.?)(?(2)\d+)$/)

- Herbert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trash Can · Accepted Answer

这样做应该可以起作用

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class NumberValidators {

  static isNumberCheck(): ValidatorFn {
    return  (c: AbstractControl): {[key: string]: boolean} | null => {
      let number = /^[.\d]+$/.test(c.value) ? +c.value : NaN;
      if (number !== number) {
        return { 'value': true };
      }

      return null;
    };
  }
}