Angular: Как добавить префикс +6 во ввод, когда пользователь нажимает на ввод текста

Question

1. Я использую угловой материал (https://material.angular.io/components/form-field/overview) для ввода.

2. Я хочу автоматически добавить «+6», когда пользователь нажимает наполе для ввода номера телефона

В настоящее время префикс «6» отображается только перед формой.

<mat-form-field>
   <span matPrefix>6&nbsp;</span>
   <input matInput placeholder="Phone Number (Eg: 60181345689)"  required formControlName="contactNo [value]="field_contact">
</mat-form-field>

Answer 1

Вы можете использовать привязку события focusin.

В вашем component.html,

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Click here" (focusin)="addPrefix($event)" [value]="inputValue">
  </mat-form-field>
</form>

И в ваших component.ts,

inputValue: string = '';

addPrefix(event) {
  this.inputValue = '+6'
}

Это добавит «6» на входе, когдапользователь нажимает на ввод.

Я сделал для вас демо более здесь .

Answer 2

Добавление директивы matPrefix к элементу внутри будет обозначать его как префикс. Он будет включен в визуальный контейнер, который обертывает элемент управления формы в соответствии со спецификацией материала.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <span matPrefix>+6 &nbsp;</span>
    <input type="tel" matInput placeholder="Phone Number">
  </mat-form-field>     
</form>

Answer 3

Я предполагаю, что вы используете валидатор pattern:

<span matPrefix *ngIf="!myForm.get('contactNo').hasError('pattern')">

Если вы хотите показать его только в фокусе:

<span matPrefix *ngIf="!myForm.get('contactNo').hasError('pattern') && activeDocumentElement === phoneNumber">
<input #phoneNumber matInput placeholder="Phone Number (Eg: 60181345689)"  required formControlName="contactNo [value]="field_contact">

Где

get activeDocumentElement() { return document.activeElement; }