我正在尝试开发一个联系表单,我希望用户输入长度在 10-12 之间的电话号码值。
值得注意的是,同样的验证在 Message 字段上进行,它唯一的 number 字段给我带来了麻烦。
I found this answer but it is of no use for me.
我有如下代码:
HTML:
<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
<input type="number" formControlName="phone" placeholder="Phone Number">
<input type="text" formControlName="message" placeholder="Message">
<button class="button" type="submit" [disabled]="!myForm.valid">Submit</button>
</form>
TS:
this.myForm = this.formBuilder.group({
phone: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(12)]],
message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]]
});`
最佳答案
像下面一样使用它并且完美地工作:
phone: ['', [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]],
自定义验证服务:
import { AbstractControl, ValidatorFn } from '@angular/forms';
export class customValidationService {
static checkLimit(min: number, max: number): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
return { 'range': true };
}
return null;
};
}
}
关于Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46129719/