Question

我正在处理角度4应用程序，我使用angular2-text-mask进行电话号码屏蔽。正如您所提供的那样，用户无法输入更多可用于屏蔽的数字，但我还希望用户根据屏蔽输入正确的数字，如果用户输入较少的数字，则需要屏蔽，否则将显示错误。

Answer 1

我将把这个答案放在这里，以供以后遇到此问题的任何人使用。您可以创建一个自定义验证器，该验证器将忽略屏蔽字符，然后仅应用该minLength验证器，而不是内置的验证器：

import { Injectable } from '@angular/core';
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class MaskedLengthValidator {
  static minLength(minLength: number, replace?: Array<string>): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (this.isEmptyInputValue(control.value)) {
        return null;  // don't validate empty values to allow optional controls
      }

      let value = control.value;

      if (!!replace && !!replace.length) {
        replace.forEach(c => {
          var regEx = new RegExp(c, 'g');
          value = value.replace(regEx, "");
        });
      } else {
        value = control.value.replace(/_/g, "");
      }

      const length: number = value ? value.length : 0;
      return length < minLength ?
          {'minlength': {'requiredLength': minLength, 'actualLength': length}} :
          null;
    };
  }

  static maxLength(maxLength: number, replace?: Array<string>): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {    
      let value = control.value;

      if (!!replace && !!replace.length) {
        replace.forEach(c => {
          var regEx = new RegExp(c, 'g');
          value = value.replace(regEx, "");
        });
      } else {
        value = !!value ? control.value.replace(/_/g, "") : value;
      }

      const length: number = value ? value.length : 0;
      return length > maxLength?
          {'maxLength': {'requiredLength': maxLength, 'actualLength': length}} :
          null;
    };
  }

  static isEmptyInputValue(value: any): boolean {
    // we don't check for string here so it also works with arrays
    return value == null || value.length === 0;
  }
}

一旦创建了验证器类，就可以像使用其他任何验证器一样使用它：

[Validators.required, MaskedLengthValidator.minLength(7), MaskedLengthValidator.maxLength(7)]

我在此处提供的验证器将自动忽略下划线，或者您可以指定要忽略的字符数组：

[Validators.required, MaskedLengthValidator.minLength(7, ['_', '-']), MaskedLengthValidator.maxLength(7)]

Answer 2

您还可以检查它是否减少数字并设置错误标签，或根据输入长度禁用提交按钮。例如：

<input class="form-control" id="orderId" required minlength="5" 
type="number" name="orderId" [ngModel]="orderIdModel" 
(ngModelChange)="orderIdModel = $event + ''" #orderId="ngModel" /> 

<span style="color:red" *ngIf="orderId.errors?.required">
       required
</span>
<span style="color:red" *ngIf="orderId?.value.length <= 5">
      5 minimum
</span>

<button [disabled]="orderId?.value.length <=5" type="submit">Submit</button>

如何在angular2-text-mask中设置电话号码屏蔽中的最小长度验证？

2 个答案: