Angular 2 benutzerdefinierte Validierung für Zahlen und Dezimalwerte

Question

Ich habe einen benutzerdefinierten Validator, der überprüft, ob ein Eingabefeld eine Nummer eingegeben hat.

Der Code sieht so aus:

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

Aber die Frage, die ich habe, ist, wenn ich ein Dezimalwert eingeben, wird es den Validierungs-Flag erhöhen, die ich nicht wollen. Ich möchte, dass das Eingabefeld ganze Zahlen und Dezimalzahlen hat. Kann mir bitte jemand helfen, das richtig zu machen?

unter meinem Template-Code ist parsleyjs für die Validierung

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

und in meiner Komponente I Reactive Form bin mit und unten ist mein Code

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

danke !!

Answer 1

So etwas sollte funktionieren

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

ng-Muster Validierung

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

verwenden können, können Sie bitte einmal überprüfen, wie diese

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

Sie Ihre Formularnamen hinzufügen. und den Namen des Eingabefeldes. $ error.pattern