数字和十进制值的 Angular 2 自定义验证 [英] Angular 2 custom validation for numbers and decimal values

查看：17
本文介绍了数字和十进制值的 Angular 2 自定义验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

代码如下:

import { AbstractControl, ValidatorFn } from '@angular/forms';导出类 NumberValidators {静态 isNumberCheck(): ValidatorFn {return (c: AbstractControl): {[key: string]: boolean} |空 =>{if (c.value !== undefined && (isNaN(c.value))) {返回{'值':真}；}返回空；};}}

但我遇到的问题是，当我输入一个十进制值时，它会引发我不想要的验证标志.我希望输入字段具有整数和十进制数.有人可以帮我改正吗.

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

<label for="upperbeltposition" class="col-md-6 col-form-label">上皮带位置 (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 class="form-group row"><label for="platformxposition" class="col-md-6 col-form-label">平台 X 位置 (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 class="form-group row"><label for="platformyposition" class="col-md-6 col-form-label">平台 Y 位置 (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"/>

在我的组件中，我使用的是 Reactive 表单，下面是我的代码

上带位置:['', [Validators.required, NumberValidators.isNumberCheck]],platformxposition: ['', [Validators.required, NumberValidators.isNumberCheck]],平台位置:['', [Validators.required, NumberValidators.isNumberCheck]]

谢谢！！

解决方案

这样的事情应该可行

import { AbstractControl, ValidatorFn } from '@angular/forms';导出类 NumberValidators {静态 isNumberCheck(): ValidatorFn {return (c: AbstractControl): {[key: string]: boolean} |空 =>{让 number =/^[.\d]+$/.test(c.value) ?+c.value : NaN;如果(数字！== 数字){返回{'值':真}；}返回空；};}}

I have a custom validator that checks if an input field has a number entered into it.

The code looks like so:

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

But the issue I have is when I enter a decimal value it is raising the validation flag which I dont want. I want the input field to have whole numbers and decimal numbers. Can somebody please help me get this correct.

Below is my template code using parsleyjs for validation

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

and in my Component I am using Reactive form and below is my code

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

thanks!!

解决方案

Something like this should work

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

这篇关于数字和十进制值的 Angular 2 自定义验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆