Angular Forms change Tab order

user_4867472 0
Viewed 7222

For simplicity when building a two column form I built it in two separated divs using flex box. The form however reads from left to right i.e First Name at the top of div one and Surname at the top of div two. If the user uses the tab key to move between inputs the tab key moves down the form rather than across. This was an oversight by me but I was wondering if the tabbing between inputs could be set different from the default. Maybe a picture would help.

enter image description here

So I would like to change it to tab across. How would I do that? Also the actual form is more complicated than shown below so I don't want to rebuild the html.

My HTML

<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-between center">
 <div fxFlex="40">
   <mat-form-field class="formFieldLeft">
    <div class="is-size-7 has-text-grey-light mbxs">First Name</div>
    <input matInput formControlName="firstName">
   </mat-form-field>
<mat-form-field class="formFieldLeft">
  <div class="is-size-7 has-text-grey-light mbxs">Email Address</div>
  <input matInput formControlName="email">
</mat-form-field>
<mat-form-field class="formFieldLeft mblg">
  <div class="is-size-7 has-text-grey-light mbxs">Company Phone Number</div>
  <input matInput formControlName="companyPhoneNumber">
</mat-form-field>

<div fxFlex="60">
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Surname</div>
    <input matInput formControlName="lastName">
  </mat-form-field>
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Job Title</div>
    <input matInput formControlName="jobTitle">
  </mat-form-field>
  <mat-form-field class="formFieldRight mblg">
    <div class="is-size-7 has-text-grey-light mbxs">Mobile Number</div>
    <input matInput formControlName="mobilePhoneNumber">
  </mat-form-field>
</div>
angular-forms angular html
2 Answers

Add tabIndex like

<input tabindex="3">
<input tabindex="0">
<input tabindex="-1">
<input>         
<input tabindex="2">
<input tabindex="1">

see this for more details

user_144928410

You can save active tab index and create separate function on

(keyup)="onKeypressEvent($event)" {
 // check does it `tab`
}

chech the key code and depending of where you current tab active change next active tab

user_90790400
Related