Custom Angular Input Mask

Question

I do have an input field which is populated with JSON object data.

 dimension: {
   length: 10.00,
   width: 20.00,
   height: 30.00,
 }

The input looks like this:

 <input matInput [placeholder]="Dimension (LxHxW)" formControlName="dimensions" 
        name="dimensions" mask="00.0x00.0x00.0" [specialCharacters]="['x', '.']" 
        [clearIfNotMatch]="true" [showMaskTyped]="true"
  />

where dimensions is built in typescript code as:

 let dimensions = null;
    if (dimensionObject) {
      dimensions = '' + dimensionObject.length + 'x' + dimensionObject.width + 'x'
        + dimensionObject.height;
    }

The goal is to map correctly the data on the mask and obtain the length, width and height concatenated with an x in between-> obtain a flexible mask.

The problem appears when dimensions values are of different length:

e.g. if dimension is 2.3 x 12.3 x 42.2 instead of 2.3 x 12.3 x 42.2 it will show 23.1 x 23.4 x 22. ( x shifted).

Any solutions you guys can spot?

Martijn Pieters · Accepted Answer · 2019-02-19 14:33:11Z

3

i guess you have to use patterns

The following example, taken from this article on CSS-tricks, by Chris Coyier but created by Estelle Weyl, shows how to handle a Canadian zip code with the A1A 1A1 form:

 <div>
   <label for="czc">Canadian Zip Code</label>
   <input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" 
       data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca" 
       title="6-character alphanumeric zip code in the format of A1A 1A1" />
 </div>

in your case you should only change the pattern regular expression.

edited Feb 19, 2019 at 14:33

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Feb 19, 2019 at 13:10

Giovanni Avila

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anil Singh · Accepted Answer · 2024-03-07 12:25:48Z

export class AppComponent {
  name = "Angular";

  maskData(name: string) {
    return maskDisplayNameV2(name);
  }

  maskPhoneNumber(phoneNumber: string) {
    return maskPad(phoneNumber) + lastFourDigits(phoneNumber);
  }

  typeoftest(str: string | number) {
    if (str && typeof str === 'number') {
      console.log('it is number');
    } else if (str && typeof str === 'string') {
      console.log('it is string');
  }
}

export function maskDisplayName(displayName: string): string {
  if (displayName) {
    let name_length, name_value, i, name_print;
    name_length = displayName.length || 0;
    name_value = name_length ? name_length / 2 : 0;
    name_print = displayName.substring(0, name_value) || "";
    for (i = 0; i < name_value; i++) {
      name_print += "*";
    }
    return name_print || displayName;
  } else {
    return "";
  }
}

export function maskDisplayNameV2(name: string): string {
  if (!name) {
    return 'Name Required';
  }
  const trimmed = name.trim();
  if (trimmed.length > 4) {
    return maskName(trimmed, 4);
  } else if (trimmed.length > 2) {
    return maskName(trimmed, 2);
  } else {
    return trimmed;
  }
}
function maskName(str: string, greaterThan: number): string {
  return str.substring(0, greaterThan / 2) + '*'.repeat(str.length - 
greaterThan) + str.slice(-(greaterThan / 2));
}

function lastFourDigits(str: string): string {
  if (str) {
    if (str.length > 4) {
      return str.slice(-4);
    } else {
      return str;
    }
  }
}

function maskPad(str: string): string {
  if (str && str.length > 4) {
    return '*'.repeat(str.length - 4);
  }
}

export function maskPhoneNumberFirstHalf(phoneNumber: string): string {
  let phone_length, phone_value, first_half, first_length, first_value, 
  first_masked, i, first_print = '';
  phone_length = phoneNumber.length || 0; // +6593829002 length 11 or 
 +123456789 length 10 or +60137783313 length 12
  phone_value = phone_length ? (phone_length / 2) : 0; // 5.5 or 5 or 6
  first_half = phoneNumber.substring(0, phone_value).trim(); // +6593 or 
 +1234 or +60137
  first_length = first_half.length || 0; // 5 or 5 or 3
  first_value = first_length ? (first_length / 2) : 0; // 2.5 or 2.5 or 3
  first_masked = Math.floor(first_length - first_value); // 2 or 2 or 3
  for (i = 0; i < first_value; i++) {
    first_print += first_half[i]; // +65 or +12 or +60
  }

  for (i = 0; i < first_masked; i++) {
    first_print += '*'; // ** or ** or ***
  }

  return first_print;
}

export function getPhoneNumberLastHalf(phoneNumber: string): string {
  let phone_length, phone_value;
  phone_length = phoneNumber.length || 0; // +6593829002 length 11 or  
  +123456789 length 10 or +60137783313 length 12
  phone_value = phone_length ? (phone_length / 2) : 0; // 5.5 or 5 or 6
  return phoneNumber.substring(phone_value).trim(); // 829002 or 56789 or 
  783313
 }

Collectives™ on Stack Overflow

Custom Angular Input Mask

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related