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

Question

Я пытаюсь создать простое поле для номера телефона с помощью модуля 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. Как сохранить в элементе управления значение с маской, ie специальные символы и префикс? В основном мне нужно сохранить значение, которое видит пользователь: +1 (999) 9999-99

Answer 1

Use [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>

Answer 2

Я рекомендую вам использовать 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);
}