Xác thực tùy chỉnh 2 góc cho số và giá trị thập phân

Question

Tôi có trình xác thực tùy chỉnh kiểm tra xem trường nhập có số được nhập vào nó hay không.

Mã này trông giống như vậy:

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

Nhưng vấn đề tôi có là khi tôi nhập một giá trị thập phân nó được nâng cao lá cờ xác nhận mà tôi không muốn. Tôi muốn trường đầu vào có số nguyên và số thập phân. Ai đó có thể vui lòng giúp tôi hiểu đúng không.

Dưới đây là mẫu mã của tôi sử dụng parsleyjs để xác nhận

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

và trong phần của tôi, tôi đang sử dụng hình thức phản ứng và dưới đây là mã của tôi

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

cảm ơn !!

Answer 1

Something như thế này nên làm việc

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

có thể sử dụng ng-mẫu xác nhận

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

bạn có thể xin vui lòng kiểm tra một lần như thế này

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

Bạn phải thêm tên mẫu của bạn. và tên trường đầu vào $ error.pattern