Ionic 3 SMS Verification experince

Question

after many attempts i gave up , i'm trying to make the inputs when the user put one number on there switch to the next input and if reached the last one an action should be called to verify if it's right or wrong, also if the user clicks in an input he entered a number already on it the number should be editable so the user can edit the code if he entered it wrong...

<ion-content padding text-center>
  <ion-icon name="arrow-back" class="backBtn" (click)="onPoping()"></ion-icon>
  <h3>Verification Code</h3>
  <h6>Enter the code you received via SMS</h6>
  <ion-grid class="verification-code-wrap">
    <ion-row>
      <ion-col>
          <ion-input type="number" min="0" max="9" maxlength="1"></ion-input>
      </ion-col>
      <ion-col>
          <ion-input type="number"  min="0" max="9"   maxlength="1"></ion-input>
      </ion-col>
      <ion-col>
          <ion-input type="number"  min="0" max="9"  maxlength="1"></ion-input>
      </ion-col>
      <ion-col>
          <ion-input type="number"  min="0" max="9"  maxlength="1"></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
  <button ion-button clear>Resend code</button>
</ion-content>

ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-verify-number',
  templateUrl: 'verify-number.html',
})
export class VerifyNumberPage {
  container: number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }
  onPoping(){
    this.navCtrl.pop();
  }
}

i found a java script fiddle that can do half of the way but i can't implement it in my app , please help!

Answer 1

Expanding on the answer given by Waqas Nasir... You can use formBuilder to check if each input field is correct upon form submit. Basic implementation:

*Note: using the input type "number" with a maxlength attribute will not be respected in some browsers. Input type "tel" is an alternate if you want the keyboard to show only numbers when using mobile devices.

.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController } from 'ionic-angular';

...

export class EmailVerification {    
   emailVerificationForm: FormGroup;

constructor(
   public navCtrl: NavController, 
   public formBuilder: FormBuilder 
   ) {

     this.emailVerificationForm = formBuilder.group({
        emailCode1: ['', Validators.compose([Validators.minLength(6), Validators.required])],
        emailCode2: ['', Validators.compose([Validators.minLength(6), Validators.required])],
        emailCode3: ['', Validators.compose([Validators.minLength(6), Validators.required])],
        emailCode4: ['', Validators.compose([Validators.minLength(6), Validators.required])],
     });
    }

     ...

     next() {
        if(this.emailVerificationForm.valid)
           {
            this.navCtrl.push(nextPage);
           }
        }
}

.html

<form class="form-container" [formGroup]="emailVerificationForm" #formCtrl="ngForm" (keydown.enter)="$event.preventDefault()">

     <input (keyup)="updateList($event)" placeholder="1" type="number" maxlength="1" name="emailCode1" formControlName="emailCode1" [class.invalid]="!emailVerificationForm.controls.emailCode1.valid && (submitEmailVerification)">
     <input (keyup)="updateList($event)" placeholder="2" type="number" maxlength="1" name="emailCode2" formControlName="emailCode2" [class.invalid]="!emailVerificationForm.controls.emailCode2.valid && (submitEmailVerification)">
     <input (keyup)="updateList($event)" placeholder="3" type="number" maxlength="1" name="emailCode3" formControlName="emailCode3" [class.invalid]="!emailVerificationForm.controls.emailCode3.valid && (submitEmailVerification)">
     <input (keyup)="updateList($event)" placeholder="4" type="number" maxlength="1" name="emailCode4" formControlName="emailCode4" [class.invalid]="!emailVerificationForm.controls.emailCode4.valid && (submitEmailVerification)">

     <p class="error" *ngIf="!emailVerificationForm.valid  && (submitEmailVerification)">The entered code is incorrect</p>

     <button ion-button type="submit" (click)="next()" block>Next</button>

</form>

Answer 2

<form [formGroup]="codeForm" #formCtrl="ngForm" (keydown.enter)="$event.preventDefault()">
    <input [(ngModel)]="codeInput[0]" formControlName="codeInput1" placeholder="3" (keyup)="updateList($event)" type="number" maxlength="1" name="input1" ngControl="input1" required>
    <input [(ngModel)]="codeInput[1]" (keyup)="updateList($event)" formControlName="codeInput2" placeholder="3" type="number" maxlength="1" name="input2" ngControl="input2" required>
    <input [(ngModel)]="codeInput[2]" (keyup)="updateList($event)" formControlName="codeInput3" placeholder="3" type="number" maxlength="1" name="input3" ngControl="input3" required>
    <input [(ngModel)]="codeInput[3]" (keyup)="updateList($event)" formControlName="codeInput" placeholder="3" type="number" maxlength="1" name="input4" ngControl="input4" required>
</form>






updateList(ev){
    var target = ev.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value,10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
            break;
            if (next.tagName.toLowerCase() == "input") {
              next.focus();
            break;
          }
        }
    }
}