Angular 9模板驱动的表单validition和setFocus to next field不'；我们不能一起工作

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

此代码仅当ion input中出现类似的#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”

验证并将焦点设置到下一个字段不起作用。

---

我错过什么了吗？（或）是否有任何解决方法使其能够同时工作？

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

首先从离子角度模块导入文本输入。然后在ViewChild上使用read属性来获取组件中的离子输入引用

组件。ts

  import { TextInput } from 'ionic-angular';

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

---

它起作用了，@ViewChild（'password2'，{read:IonInput}）password2:IonInput；刚把文本输入改成了输入。这是angular9中的错误吗？你知道为什么两者都不使用电子邮件吗？谢谢你的时间。我想这就是angular的工作原理。因为我们将ngModel实例显式地分配给模板变量，所以它引用的是ngModel实例。

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

  import { TextInput } from 'ionic-angular';

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