Angular 9 模板驱动的表单验证和将焦点设置到下一个字段不能一起工作

Question

我在 angular 9

上有模板驱动的登录表单

 <form name="login" #loginForm="ngForm" (ngSubmit)="loginForm.form.valid && login()" *ngIf="loginPage"  novalidate>
      <ion-item>
        <ion-label position="stacked">{{accountPage.your_email}} </ion-label>
        <ion-input type="email" (keyup)="gotoNextField($event, password2)" [(ngModel)]="creds.email" name="email" #email="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && email.invalid }" required="ngModel" email autofocus="true"></ion-input>
        <ion-item *ngIf="email.invalid && (email.dirty || email.touched)">
            <ion-text color="danger">
              <p>{{accountPage.check_email}}</p>
            </ion-text>
        </ion-item>
      </ion-item>
      <ion-item>
        <ion-label position="stacked"><span style="float:left; margin-top:7px;">{{accountPage.your_password}}</span> <ion-button fill="clear" size="small" style="float:right" (click)="forgotPassword()">{{accountPage.forget_password}}</ion-button></ion-label>
        <ion-input type="password" (keyup)="initLogin($event, loginForm.form.valid)"  [(ngModel)]="creds.password" name="password2"  #password2="ngModel" minlength="8" required="ngModel"></ion-input>
        <ion-item *ngIf="password2.invalid && (password2.dirty || password2.touched)">
          <ion-text color="danger">
            <p>{{accountPage.password_desc}}</p>
          </ion-text>
        </ion-item>
      </ion-item>
      <ion-button  class="cv-btn-primary" size="large" expand="full" type="submit" [disabled]="loginForm.invalid"  ><ion-icon name="mail-outline"></ion-icon> &nbsp;{{accountPage.login}} {{accountPage.with_password}}</ion-button>
 </form>

如果用户按“return”或在键盘上输入键，我在 ts 文件中有这段代码将焦点设置到下一个字段。

public gotoNextField(event, nextElement){
    if(event.keyCode === 13){
      nextElement.setFocus();
    }
  }

仅当 #email 在离子输入中像这样存在时，此代码才能将焦点设置到下一个字段。

<ion-input type="email" (keyup)="gotoNextField($event, password2)" [(ngModel)]="creds.email" name="email" #email [ngClass]="{ 'is-invalid': loginForm.submitted && email.invalid }" required="ngModel" email autofocus="true"></ion-input>

仅当 #email="ngModel"

时，失败验证文本才会显示在 UI 中

<ion-input type="email" (keyup)="gotoNextField($event, password2)" [(ngModel)]="creds.email" name="email" #email="ngModel" [ngClass]="{ 'is-invalid': loginForm.submitted && email.invalid }" required="ngModel" email autofocus="true"></ion-input>

验证和将焦点设置到下一个字段不能同时使用。我错过了什么吗？（或）是否有任何解决方法可以使它们一起工作？

Answer 1

由于您已将 password2 模板变量分配给 ngModel，它指向 ngModel 实例，我们可以在组件中使用 Viewchild 装饰器来获取 TextInput 引用。

首先从 ionic angular 模块导入 TextInput。然后在 ViewChild 上使用 read 属性获取组件中的离子输入参考。

component.ts

  import { TextInput } from 'ionic-angular';

  @ViewChild('password2', {read:TextInput}) textInput:TextInput;
   
  public gotoNextField(event, nextElement){
    if(event.keyCode === 13){
      this.textInput.setFocus();
    }
  }

Angular 9 模板驱动的表单验证和将焦点设置到下一个字段不能一起工作

Angular 9 Template driven form validition and setFocus to next field doesn't work together

angular

ionic4

angular-forms