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

我认为问题是您的表单在忘记密码时会被提交。点击。尝试在<form>内添加登录按钮;路由应该正常工作。

Answer 2

我已使用css class显示/隐藏元素而非使用*ngIf来解决此问题

验证表单控件比导航到其他URL更有优先级 - angular2

2 个答案: