如何存储 OTP 控制器输入的变量？

Question

我正在尝试获取 6 个 otp 控制器输入的值，因此，我将 ngModel 添加到 otp 控制器中的每个 ion-input。然后我将所有属性连接到一个属性但它对我不起作用。

page.html

  <ion-grid>
              <ion-row text-center>
                <ion-col ngDefaultControl>
                  <ion-input [(ngModel)]="password1" #otp1 required maxLength="1" 
     (keyup)="otpController($event,otp2,'')">
                  </ion-input>
                  <ion-input [(ngModel)]="password2" #otp2 required maxLength="1" 
     (keyup)="otpController($event,otp3,otp1)">
                  </ion-input>
                  <ion-input [(ngModel)]="password3" #otp3 required maxLength="1" 
     (keyup)="otpController($event,otp4,otp2)">
                  </ion-input>
                  <ion-input [(ngModel)]="password4" #otp4  required maxLength="1" 
     (keyup)="otpController($event,otp5,otp3)">
                  </ion-input>
                  <ion-input [(ngModel)]="password5" #otp5 required maxLength="1" 
    (keyup)="otpController($event,otp6,otp4)">
                   </ion-input>
                   <ion-input [(ngModel)]="password6" #otp6  required maxLength="1" 
     (keyup)="otpController($event,'',otp5)">
                   </ion-input>
                 </ion-col>
                </ion-row>
        </ion-grid>

page.ts

export class Page {
password: any;
password1:any;
password2:any;
password3:any;
password4:any;
password5:any;
password6:any;
  constructor() { }
changer(){
  this.password = this.password1 + this.password2 + this.password3 + this.password4 + this.password5 + this.password6
}

Answer 1

你可以使用库来实现它，你可以很容易地得到它

npm i ng-otp-input

在html

<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" 
*ngIf="showOtpComponent" [config]="config"></ng-otp-input>

//for seeing otp
<span *ngIf="otp" class="o-t-p">Entered otp :-{{otp}}</span>

在 ts

otp: string;
  showOtpComponent = true;
  @ViewChild('ngOtpInput') ngOtpInput: any;

  onOtpChange(otp) {
    this.otp = otp;
  }

  setVal(val) {
    this.ngOtpInput.setValue(val);
  }

完整示例

https://stackblitz.com/github/code-farmz/ng-otp-input?file=src%2Fapp%2Fapp.component.ts

了解更多信息 https://www.npmjs.com/package/ng-otp-input

如何存储 OTP 控制器输入的变量？

How to store variables of OTP Controller inputs?

ionic-framework

angular

ionic4