Text-mask: How to set min length validation in phone number masking?

[lakhvir1994]

I am working on angular 4 application and I am using this for phone number masking.
As you provide that user can not enter more number then available in masking but I also want that the user should enter a proper number according to masking if user enter less number then masking required it will show an error.

[SiwakornSitti]

I got the similar problem anyone solve?

[sufiiiyan]

I have same issue... @lakhvir1994 @SiwakornSitti you got any workaround for this

[sraveen123]

any update ?

[DuncanFaulkner]

I came across this issue today as well and thought I would post my approach to the issue.
on the Input I used the blur event and checked for an underscore if there was an underscore I set the errors validation.

checkMacAddressValue(value: string) {
    if (value.indexOf('_') !== -1) {
      const mac = this.deviceFormGroup.get('macAddress');
      mac.setErrors({ invalidMacAddress: true });
    }
  }


  <input matInput placeholder="Mac Address" #macAddress (blur)="checkMacAddressValue(macAddress.value)" [textMask]="{mask: mac}" formControlName="macAddress" required>
  <mat-error *ngIf="formGroup.get('macAddress').hasError('invalidMacAddress')">
           <span>Mac address is not valid</span>
  </mat-error>

[atom-morgan]

Thanks @DuncanFaulkner for your solution.

It worked for me with a slight modification for an empty field (.length === 0) that's been blurred but does not have a value. This is due to the default behavior of placeholders such as ( and - not displaying until a keypress has been made.

checkPhoneValue(value: string) {
  if (value.indexOf('_') !== -1 || value.length === 0) {
    let phone = this.form.get('phone');
    phone.setErrors({ pattern: true });
  }
}

The obvious downside to this is that you have one or many FormControls where validation isn't using Validators but personally, I can live with it.