Как я могу получить значение маски ngx-mask?

Я пытаюсь создать простое поле для номера телефона с помощью модуля ngx-mask следующим образом:

<mat-form-field>
              <input matInput formControlName="PhoneNumber" placeholder="Phone number" mask="(000) 0000-00" prefix="+1" [showMaskTyped]="true">
</mat-form-field>

Это работает, но значение в элементе управления PhoneNumber равно 999999999. Как сохранить в элементе управления значение с маской, т.е. специальные символы и префикс? В основном мне нужно сохранить значение, которое видит пользователь: +1 (999) 9999-99


angular mask ngx-mask
person Kngh2    schedule 13.03.2020    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Используйте [dropSpecialCharacters] = "false"

<mat-form-field>
   <input matInput formControlName="PhoneNumber" placeholder="Phone number" mask="(000) 0000-00" prefix="+1" [showMaskTyped]="true" [dropSpecialCharacters]="false">
</mat-form-field>
person gfinotti    schedule 08.05.2020

arrow_upward
1
arrow_downward

Я рекомендую вам использовать ElementRef. Вы должны определить входной ElementRef в вашем ts файле:

@ViewChild('customInput', {static: false}) inputEl: ElementRef;

Затем определите его в своем html, чтобы код вашего шаблона был изменен на этот

<mat-form-field>
          <input #customInput matInput formControlName="PhoneNumber" placeholder="Phone number" mask="(000) 0000-00" prefix="+1" [showMaskTyped]="true">
</mat-form-field>

Теперь вы можете получить доступ к фактическому замаскированному значению вашего #customInput в ts файле:

showMeInput(): void {
    console.log(this.inputEl.nativeElement.value);
}
person Osman Omar    schedule 13.03.2020
comment
Этот ответ определенно работает. Есть идеи, как вы могли бы интегрировать его с formControl вместо использования ссылок на элементы? Это было бы идеально, если у вас есть данные, которые автоматически заполняются с сервера, но еще не были отрисованы в DOM. - person Willie; 01.04.2020