当用户点击输入文本时如何在输入中添加前缀+6

Question

我使用角度材质（https://material.angular.io/components/form-field/overview）进行输入。

我想当用户单击字段插入电话号码时自动添加“+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

我假设您正在使用

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; }

Answer 2

您可以使用

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 3

将

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 4

既然你正在使用

ReactiveForms

，你应该使用它为此提供的方法......

参见 stackblitz 示例