title: Angular 9 Template driven form validition and setFocus to next field doesn't work together
body: <p>I have template driven login form on angular 9</p>
  <pre><code> &lt;form name=&quot;login&quot; #loginForm=&quot;ngForm&quot; (ngSubmit)=&quot;loginForm.form.valid &amp;&amp; login()&quot; *ngIf=&quot;loginPage&quot;  novalidate&gt;
        &lt;ion-item&gt;
          &lt;ion-label position=&quot;stacked&quot;&gt;{{accountPage.your_email}} &lt;/ion-label&gt;
          &lt;ion-input type=&quot;email&quot; (keyup)=&quot;gotoNextField($event, password2)&quot; [(ngModel)]=&quot;creds.email&quot; name=&quot;email&quot; #email=&quot;ngModel&quot; [ngClass]=&quot;{ 'is-invalid': loginForm.submitted &amp;&amp; email.invalid }&quot; required=&quot;ngModel&quot; email autofocus=&quot;true&quot;&gt;&lt;/ion-input&gt;
          &lt;ion-item *ngIf=&quot;email.invalid &amp;&amp; (email.dirty || email.touched)&quot;&gt;
              &lt;ion-text color=&quot;danger&quot;&gt;
                &lt;p&gt;{{accountPage.check_email}}&lt;/p&gt;
              &lt;/ion-text&gt;
          &lt;/ion-item&gt;
        &lt;/ion-item&gt;
        &lt;ion-item&gt;
          &lt;ion-label position=&quot;stacked&quot;&gt;&lt;span style=&quot;float:left; margin-top:7px;&quot;&gt;{{accountPage.your_password}}&lt;/span&gt; &lt;ion-button fill=&quot;clear&quot; size=&quot;small&quot; style=&quot;float:right&quot; (click)=&quot;forgotPassword()&quot;&gt;{{accountPage.forget_password}}&lt;/ion-button&gt;&lt;/ion-label&gt;
          &lt;ion-input type=&quot;password&quot; (keyup)=&quot;initLogin($event, loginForm.form.valid)&quot;  [(ngModel)]=&quot;creds.password&quot; name=&quot;password2&quot;  #password2=&quot;ngModel&quot; minlength=&quot;8&quot; required=&quot;ngModel&quot;&gt;&lt;/ion-input&gt;
          &lt;ion-item *ngIf=&quot;password2.invalid &amp;&amp; (password2.dirty || password2.touched)&quot;&gt;
            &lt;ion-text color=&quot;danger&quot;&gt;
              &lt;p&gt;{{accountPage.password_desc}}&lt;/p&gt;
            &lt;/ion-text&gt;
          &lt;/ion-item&gt;
        &lt;/ion-item&gt;
        &lt;ion-button  class=&quot;cv-btn-primary&quot; size=&quot;large&quot; expand=&quot;full&quot; type=&quot;submit&quot; [disabled]=&quot;loginForm.invalid&quot;  &gt;&lt;ion-icon name=&quot;mail-outline&quot;&gt;&lt;/ion-icon&gt; &amp;nbsp;{{accountPage.login}} {{accountPage.with_password}}&lt;/ion-button&gt;
   &lt;/form&gt;
  </code></pre>
  <p>I have this code in ts file to set focus to next field if user press &quot;return&quot; or enter key on keyboard.</p>
  <pre><code>public gotoNextField(event, nextElement){
      if(event.keyCode === 13){
        nextElement.setFocus();
      }
    }
  </code></pre>
  <p>This code works sets focus to the next field only if <strong>#email</strong> is present like this in ion-input.</p>
  <pre><code>&lt;ion-input type=&quot;email&quot; (keyup)=&quot;gotoNextField($event, password2)&quot; [(ngModel)]=&quot;creds.email&quot; name=&quot;email&quot; #email [ngClass]=&quot;{ 'is-invalid': loginForm.submitted &amp;&amp; email.invalid }&quot; required=&quot;ngModel&quot; email autofocus=&quot;true&quot;&gt;&lt;/ion-input&gt;
  </code></pre>
  <p>The failure validation text shows in the UI only if <strong>#email=&quot;ngModel&quot;</strong></p>
  <pre><code>&lt;ion-input type=&quot;email&quot; (keyup)=&quot;gotoNextField($event, password2)&quot; [(ngModel)]=&quot;creds.email&quot; name=&quot;email&quot; #email=&quot;ngModel&quot; [ngClass]=&quot;{ 'is-invalid': loginForm.submitted &amp;&amp; email.invalid }&quot; required=&quot;ngModel&quot; email autofocus=&quot;true&quot;&gt;&lt;/ion-input&gt;
  </code></pre>
  <p>The validation &amp; set focus to the next field doesn't work together.
  Am I missing something? (or) is there any workaround to make it both work together?</p>