代码如下所示:
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]]
谢谢!!
最佳答案
像这样的东西应该可以工作
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;
};
}
}
关于javascript - 数字和小数值的 Angular 2 自定义验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44534938/