Question

经过多次尝试后，我放弃了，当用户输入一个号码时，我试图输入输入切换到下一个输入，如果到达最后一个，则应调用一个动作来验证它是否为＆＃39 ;是对还是错，如果用户点击了输入，他输入了一个数字，那么该数字应该是可编辑的，这样用户可以编辑代码，如果他输错了...

parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PS1="\u@\h \[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "

ts文件

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

我发现了一个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

扩展Waqas Nasir给出的答案...您可以使用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>

Ionic 3短信验证体验

2 个答案: