How to add prefix +6 in input when user click on the input text

Question

I am using angular material(https://material.angular.io/components/form-field/overview) for input.

I want to auto add '+6' when user click on the field to insert phone number

Currently the '6' prefix only display in front of the form.

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

Do we need to remove the +6 when the user unselect the input — wentjun, Apr 05 '19 at 09:38
Ok, let me know if my answer works! I added the code to handle the clicking of fields to add the prefix — wentjun, Apr 05 '19 at 09:48

score 0 · Answer 1 · answered Apr 05 '19 at 09:39

I assume you're using the pattern validator :

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

If you want to show it only on focus :

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

Where

get activeDocumentElement() { return document.activeElement; }

score 0 · Answer 2 · answered Apr 05 '19 at 09:44

You can make use of the focusin event binding.

On your 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>

And on your component.ts,

inputValue: string = '';

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

This will add the '+6' on the input when the user clicks on the input.

I have made a demo for you over here.

score 0 · Answer 3 · edited Apr 05 '19 at 19:09

Adding the matPrefix directive to an element inside the will designate it as the prefix. It will be included within the visual container that wraps the form control as per the Material specification.

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

tony · Answer 4 · 2023-06-02T08:47:02.177

0

Since you are using ReactiveForms, you should use methods it provides for this...

See stackblitz example

edited Jun 02 '23 at 08:47

answered Jun 02 '23 at 08:29

tony

834
5
10

How to add prefix +6 in input when user click on the input text

4 Answers4