Typescript Angular 4 表单验证器 minLength 和 maxLength 不适用于字段类型号

发布于09月09日

我正在try 开发一个联系人表单，我希望用户输入长度在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)]],

customValidationService:

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