html - 验证表单控件比导航到其他一些 url 具有更高的优先级 - angular2

Question

在 html 页面中有<form>验证和<a>标签，如下所示。

<form #loginForm="ngForm" (ngSubmit)="login()" novalidate>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email"
        required
        email
        [(ngModel)]="model.email" name="email"
        #email="ngModel">
        <div *ngIf="email.invalid && (email.dirty || email.touched) " class="ha-control-alert">
          <div *ngIf="email.errors.required">Email is required</div>
          <div *ngIf=" !email.errors.required  && email.errors.email">Email is invalid</div>
        </div>
      </div>
</form>
<div>
    <a [routerLink]="['/account/forgot']">Forgot your password?</a>
</div>

问题是，如果输入（电子邮件输入）被用户触摸但仍然为空，并且在该用户单击后<a>，页面不会重定向并且会出现输入错误消息，之后如果用户<a>再次单击该页面将被重定向，似乎检查验证和显示错误消息比通过<a>标签导航具有更高的优先级，这很奇怪，似乎它需要与用户交互的更多步骤然后导航才能工作。如何解决这个问题？

Answer 1

我通过使用css class显示/隐藏元素而不是使用解决了这个问题*ngIf

Answer 2

我认为问题在于单击“忘记密码”时您的表单正在提交。尝试在里面添加一个登录按钮<form>；那么路由应该可以正常工作。