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

Question

我正在尝试开发一个联系表格，我希望用户输入长度在 10-12 之间的电话号码值。

值得注意的是，同样的验证正在 消息 字段上工作，它唯一给我带来麻烦的 数字 字段。

我找到了这个答案，但这对我没有用。

我有如下代码：

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)]]
});`

原文由 Sangwin Gawande 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像下面这样使用它并完美地工作：

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

原文由 Sangwin Gawande 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以改用 模式 来验证您的电话号码，并将输入类型更改为文本

<input type="text" formControlName="phone" placeholder="Phone Number">

并将此模式用于长度在 10 到 12 之间的电话号码

phonePattern = /^[0-9]{10,12}$/;

并更改表单控件上的验证器

phone: ['',  [Validators.required, Validators.pattern(this.phonePattern)]],

你可以显示错误：

 <div *ngIf="myForm.get('phone').invalid">
      <div class="error-message invalid-feedback" *ngIf="myForm.get('phone').hasError('required')">
        required!
      </div>
      <div class="error-message invalid-feedback" *ngIf="myForm.get('phone').hasError('pattern')">
        invalid!
      </div>
</div>

原文由 Fateh Mohamed 发布，翻译遵循 CC BY-SA 4.0 许可协议