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.

Answer 1

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="()"/>