角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自定義驗證數字和十進制值

回答

相關問題