NGX MASK optionals alphanumerics take wrong spot

3.3k Views Asked by At

After several tries, I haven't found solutions, i would like make a mask.

Here is my problem:

My mask is composed:

  • 3 numbers required
  • 1 space required
  • 1 alphanumeric required
  • 1 letter not required
  • 1 space required
  • 2 numbers required

What I expect :

  • 123 AA 12
  • 123 A 12
  • 123 1 12
  • 123 12 12

below my code :

side .ts

  fullName: string;
  pattern = {
    // tslint:disable-next-line: object-literal-key-quotes
    W: {
      pattern: new RegExp("[a-zA-Z]"), //uppercase and lowercase letters only
      optional: true
    },
    K: {
      pattern: new RegExp("[a-zA-Z0-9]"), //uppercase and lowercase alphanumerics only but optionnal
      optional: true
    },
    X: {
      pattern: new RegExp("[0-9]") // numerics only
    },
    E: {
      pattern: new RegExp("[ ]"),  //space only but optionnal
      optional: true
    }
  };

side .html

<input
    mask="XXX KWEXX"
    [(ngModel)]="fullName"
    [patterns]="pattern"
    [dropSpecialCharacters]="false"
  />
  <p>format : XXX KW AA</p>

  <br /><br />

  <p>{{ fullName }}</p>

when I write 123 AA 12 everything is fine,

when I write 123 A 12, the "1" disappears and the "2" takes is spot.

Do you have any tips so that I can find a solution?

0

There are 0 best solutions below