component.html

       <div class="text-center mb-6">
            <h1 class="mb-1 text-3xl font-medium">Verificar código</h1>
            <p class="text-lg text-slate-600 font-light">Te enviamos un código al:</p>
            <!-- <p class="text-indigo-600 font-light text-lg">{{ countryCodeField + phoneField?.value | phone}}</p> -->
        </div>
        <div>
            <form novalidate [formGroup]="formSmsCode" (ngSubmit)="onSubmitSmsCode()">
                <div class="flex flex-wrap justify-center mb-4">
                    <!-- <label class="flex items-center text-sm text-slate-600 mb-2">Nombre completo</label> -->
                    
                            
                                <input formControlName="code1" 
                                autofocus
                                
                                (keyup)="onDigitInput($event)"
                                [class.border-red-600]="formSmsCode.controls.code1.touched && formSmsCode.controls.code1.invalid"
                                    class="z-10 mr-2 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                    type="tel">
                                
                                <input formControlName="code2" 
                                
                                [class.border-red-600]="formSmsCode.controls.code2.touched && formSmsCode.controls.code2.invalid"
                                (keyup)="onDigitInput($event)"
                                    class="z-10 mr-2 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                    type="tel">
                                
                                <input formControlName="code3" 
                                
                                [class.border-red-600]="formSmsCode.controls.code3.touched && formSmsCode.controls.code3.invalid"
                                (keyup)="onDigitInput($event)"
                                    class="z-10 mr-2 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                    type="tel">

                                <input formControlName="code4" 
                                    
                                    [class.border-red-600]="formSmsCode.controls.code4.touched && formSmsCode.controls.code4.invalid"
                                    (keyup)="onDigitInput($event)"
                                    class="z-10 mr-2 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                    type="tel">

                                <input formControlName="code5" 
                                
                                [class.border-red-600]="formSmsCode.controls.code5.touched && formSmsCode.controls.code5.invalid"
                                (keyup)="onDigitInput($event)"
                                    class="z-10 mr-2 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                    type="tel">
                                
                                <input formControlName="code6" 
                                
                                [class.border-red-600]="formSmsCode.controls.code6.touched && formSmsCode.controls.code6.invalid"
                                (keyup)="onDigitInput($event)"
                                class="z-10 text-center appearance-none border-gray-300 border rounded px-3 py-2 w-11 h-11 focus:ring-indigo-600 focus-within:ring-indigo-600 focus-within:border-indigo-600 focus:border-indigo-600"
                                type="tel">
                            
                    
                </div>


                

                <div class="flex justify-center">
            
                    <span class="text-xs text-center">
                        Tu código vence en: 00:00
                    </span>
                </div>
                <div>
                    <app-button typeBtn="submit" color="primary" [loading]="status === 'loading'"
                      >Register</app-button>
                </div>
                
                <div class="flex flex-col justify-center items-center">
                    <div class="mt-4 text-sm">
                        <span>¿No te llegó nada?  </span>
                        <a class="text-indigo-600 hover:underline" href="/auth/sign-in-side">Reenviar código</a>
                    </div>
                    <div class="mt-3 text-sm">
                        <span>¿Este no es tu número?  </span>
                        <a class="text-indigo-600 hover:underline" href="/auth/sign-in-side">Cambiar número</a>
                    </div>
                </div>
                
                
            </form>
        </div>

component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RequestStatus } from 'src/app/core/interfaces/request-status';
import { AuthService } from 'src/app/core/services/auth.service';
import { SideBarAuthService } from 'src/app/core/services/side-bar-auth.service';

@Component({
  selector: 'app-sms-code-form',
  templateUrl: './sms-code-form.component.html'
})
export class SmsCodeFormComponent {

  formSmsCode = this.formBuilder.nonNullable.group({
    code1:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
    code2:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
    code3:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
    code4:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
    code5:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
    code6:  ['', [Validators.required, Validators.minLength(1), Validators.maxLength(1), Validators.pattern('[0-9]')]],
  });
  status: RequestStatus = 'init';

  constructor(
    private authService: AuthService,
    private formBuilder: FormBuilder, 
    private sideBarAuth: SideBarAuthService
  ) {

  }



  async onDigitInput(event:any){

    //estar preguntando si el primer campo is valid
    //para pasar al segundo
    const isNumber= /^\d+$/g
    let target =event.target.select();
    let element;
    if (event.code !== 'Backspace' && isNumber.test(event.target.value)){
      //console.log(event.srcElement.nextSibling)      
      element = await event.srcElement.nextSibling;
    }
    if (event.code === 'Backspace'){
      element = await event.srcElement.previousSibling;
      await target
    }
    if (event.code === 'ArrowRight'){
      element = await event.srcElement.nextSibling;
      await target
    }
    if (event.code === 'ArrowLeft'){
      element = await event.srcElement.previousSibling;
      await target
    }
    if(event.code === 'Enter'){
      console.log('enter')
    }
    if(element == null){
      if(event.target.value === ''){
        return;
      }
      await event.srcElement.blur();
    } else{
      await element.focus(); 
    }
  }

}