kątowa 2 zwyczaj sprawdzania poprawności numerów i wartości dziesiętnych

Question

mam niestandardową walidatora, który sprawdza, czy pole wejściowe ma liczbę wprowadzoną do niego.

Kod wygląda tak:

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

Ale problem mam jest kiedy wprowadzić wartość dziesiętną jest podniesienie flagi walidacji, które nie chcę. Chcę, aby pole wejściowe zawierało liczby całkowite i liczby dziesiętne. Czy ktoś może mi pomóc to poprawić.

Poniżej jest mój kod szablonu za pomocą parsleyjs walidacji

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

iw moim Komponentu używam formy biernej i poniżej jest mój kod

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

dzięki!

Answer 1

Coś jak to powinno działać

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

Answer 2

można używać walidacji ng-pattern

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

można proszę sprawdzić raz jak ten

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

Należy dodać swoją nazwę formularza. . I nazwa pola input $ error.pattern