0

Have multiple input fields and select field inside the Table. All these field are dynamically created in runtime. Need to navigate and focus the Input or select field using UP, DOWN, LEFT and RIGHT arrow keys. I Am new to Angular help to achieve this functionality.

Table UI Screen enter image description here

LEFT ARROW KEY

Focus should moved to previous field from current filed

RIGHT ARROW KEY

Focus should move to next field from current filed

UP ARROW KEY

Focus should move to upper row field (previous row) from current filed

DOWN ARROW KEY

Focus should move to next row field (next row) from current filed

<tr                                                            
  *ngIf="item?.column?.parameters?.length==0 && !item?.column?.pre_defined && !rowparams?.picklist">
      <td *ngFor="let item of [].constructor(item?.column?.count); let i=index;">
          <input
             type="{{(rowparams?.data_type == 'DTYPE_DATE') ? 'date' : (rowparams?.data_type == 'DTYPE_NUMBER') ? 'number': (rowparams?.data_type == 'DTYPE_TIME') ? 'time': 'text'}}"
             id="{{rowparams?.rpp_id+'_'+'cpp'+i}}"
             (keyup)="updateEdited(rowparams?.rpp_id+'_'+'cpp'+i)"
             style="width:150px;"                                  
             (change)="updateEdited(rowparams?.rpp_id+'_'+'cpp'+i)"
             value="{{(rowparams?.values && rowparams?.values?.length > 0)? rowparams?.values[i]?.value : ''}}"                                                               
             (blur)="validateYes($event,rowparams?.data_type)"
                                                                        (keypress)="validateAlpha($event,rowparams?.data_type)" />
       </td>
   </tr>

   <tr class="test{{rowparams?.picklist}}"
       *ngIf="((!item?.column?.pre_defined)  || (item?.column?.pre_defined && item?.column?.parameters.length!=0)) && (rowparams?.picklist === true)">
        <td
           *ngFor="let params of item?.column?.parameters; let i=index;">
           <select
               *ngIf="rowparams?.picklist_values?.length!=0"
               style="width:150px;"
               id="{{rowparams?.rpp_id+'_'+params?.cpp_id}}"                                                  
               (change)="updateEdited(rowparams?.rpp_id+'_'+params?.cpp_id)">
               <option
                  *ngFor="let option of rowparams?.picklist_values"
                   value="{{option.name}}"
                   [selected]="option.id==((rowparams?.values && rowparams?.values?.length > 0)? rowparams?.values[i]?.picklist_id : '')">
                   {{option.name}}</option>
           </select>
         </td>
     </tr>
Yugesh
  • 4,030
  • 9
  • 57
  • 97

1 Answers1

0

you can listen for keyboard events this way below, I am not going to rewrite your entire form, this was actually answered on another stack but it is the correct answer.

@Component({
        ...
        host: {
            '(document:keydown)': 'handleKeyboardEvents($event)'
        }
    })

export class MyComponent {
    ...
    handleKeyboardEvents(event: KeyboardEvent) {
        this.key = event.which || event.keyCode;
    }
}

How can I listen for keypress event on the whole page?

https://angular.io/api/core/HostListener

chris burd
  • 728
  • 3
  • 9
  • Already Implemented this piece of your code in my code but how to navigate the focus on next element and below row. In JQUERY use `next().find('input').foucs()` like that how can i achieve this in Angular? – Yugesh Jun 21 '21 at 04:51
  • @Yugesh did you find a solution to your problem? I am looking for a solution too. – bikram s. May 25 '22 at 12:26