How to append and prepend a character on the mat input?

Question

I have my html file as

<div class="space-between-items">
     <mat-form-field>
        <mat-label>NEC LEC</mat-label>
        <input #neclec matInput formControlName="necLec"  autocomplete="off" 
           [minLength]="NEC_LEC_MIN_LENGTH" [maxLength]="NEC_LEC_MAX_LENGTH"
           [value]="neclec.value.toString().toUpperCase()">
     </mat-form-field>
     <mat-checkbox color="primary" formControlName="chkNecLec"></mat-checkbox>
  </div>

When i save enter something in this field, it updates the grid as it is right now. How do i have it automatically add the braces to my input.

i want it to be saved with the braces all the time without having to manually entering the braces on the input so that when I enter 'REC' it would appear as (REC) in the grid.

score 0 · Accepted Answer · answered Jul 29 '20 at 18:50

0

Below solutions might work for you.

function myfunc(value){
    if(!value.startsWith("(")){
    value = "(" + value;
  }
  if(!value.endsWith(")")){
    value = value + ")"
  }
  document.getElementById("abc").value = value;
}

<input id="abc" type="text" onKeyUp="myfunc(value)" value="()"/>

answered Jul 29 '20 at 18:50

Shabbir Dhangot

8,954
10
58
80

Thank you @Shabbir Dhangot. I had to change from (onKeyUp) to (change) and it worked just fine. – E S Aug 03 '20 at 21:22

How to append and prepend a character on the mat input?

1 Answers1