Ionic 3短信验证体验

Question

在多次尝试后，我放弃了，当用户把一个数字放在那里时，我试图让输入切换到下一个输入，如果到达最后一个，应该调用一个操作来验证它是正确的还是错误的，另外，如果用户单击输入，他输入了一个已经在上面的数字，这个数字应该是可编辑的，这样用户可以编辑代码，如果他输入了错误的代码。

<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文件

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();
  }
}

我找到了一个java脚本fiddle，可以完成一半的工作，但我无法在我的应用程序中实现它，请帮帮我！

Answer 1

<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;
          }
        }
    }
}

Answer 2

对瓦卡斯·纳斯尔给出的答案进行扩展……您可以在表单提交时使用formBuilder检查每个输入字段是否正确。基本实现：

*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>