角2自定义验证数字和十进制值

我有一个自定义验证器，检查输入字段是否有输入数字。角2自定义验证数字和十进制值

代码看起来像这样：

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

谢谢!!

来源

2017-06-14 ZAJ

在这里使用NaN进行了大量的写作：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN有帮助。根据此参考，isNaN应为十进制值返回false。 – DeborahK

所以，我需要删除isNaN以允许整数和小数 – ZAJ

像这样的东西应该工作

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

来源

2017-06-17 07:59:28 Dummy

不，它不工作时，我输入十进制值，如1.1655 – ZAJ

检查此jsfiddle，它完美的工作，https://jsfiddle.net/svLeh6m9/。 'c.value'之前的'+号？ – Dummy

它与我在我的HTML文件'data-parsley-type =“number”''' – ZAJ

可以使用NG模式验证

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

来源

2017-06-23 09:27:45 Kondal

角2自定义验证数字和十进制值

回答

相关问题