Как можно добавить дефис середины числа в angular 8

Question

Мне нужны отдельные группы номеров с дефисом в знаке angular 8, как показано ниже.

1111-2222-3333-4444

Я использую mat-input, также я хочу отформатировать дефис настройки, когда пользователь начинает вводить номер, и я хочу показать отформатированное число в директиве angular {{mynumber}}.

Как я могу это сделать?

Спасибо

Answer 1

Ну, решение, которое я нахожу, немного безобразно. В основном вам нужно зарегистрироваться на входное событие ввода и изменить его значение, чтобы оно содержало дефисы. Вам также придется очищать дефисы при принятии значений формы.

Таким образом, функция добавления дефисов будет выглядеть примерно так:

export class InputPrefixSuffixExample {
  designedValue: string = "";

  design(inputValue: string) {
    if (inputValue.length > 6) {
      this.designedValue = inputValue.substr(0, 7) + "-" + inputValue.substr(8, 12);
    } else if (inputValue.length > 2) {
      this.designedValue = inputValue.substr(0, 3) + "-" + inputValue.substr(4, 6);
    }
  }
}

В качестве альтернативы вы можете использовать библиотеки, чтобы помочь вам в этом. Самая популярная библиотека - это маска ngx. https://www.npmjs.com/package/ngx-mask

Answer 2

Вы можете замаскировать angular материал и angular2-text-mask

  datemask = [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

<mat-form-field class="example-full-width">
    <input matInput [textMask]="{mask: datemask}" [(ngModel)]="myModel" placeholder="Type" value="01/03/2019">
  </mat-form-field>

проверьте это Stackblitz для рабочей демонстрации: https://stackblitz.com/edit/angular-material-input-mask-ycbdzl