为什么在我按下提交按钮之前就验证了 Angular 表单？

Question

我有一个反应式 Angular 表单。当页面加载表单时，已经检查了错误。

我正在尝试使用滚动到错误指令来滚动并关注错误 div，但表单永远不会去那里，它已经过验证。

import { ElementRef, HostBinding, Input } from '@angular/core';
import { Directive } from '@angular/core';

@Directive({ 
    selector: '[scrollTo]'
})

export class ScrollDirective {
  constructor(private elRef:ElementRef) {}

  @HostBinding('hidden') isError:boolean = false; 

  @Input() set scrollTo(cond) {
      console.log(cond);

      this.isError = cond; 
      if(cond) { 
          this.elRef.nativeElement.scrollIntoView();
          this.elRef.nativeElement.focus(); 
        } 
    }

}

这是我检查错误的地方，但它已经检查过了，如果我把 scrollTo 放在外面，它首先会滚动到。

  <div class="row">
    <div class="col-md-12">
      <span *ngIf="user.get('email').touched && !user.get('email').valid && !user.get('email').pristine">
        <small [scrollTo] = "user.get('email').valid">Invalid email</small>
      </span>
    </div>
  </div>

更新

现在我就是这样用的

<div class="col-md-4" [scrollTo] = "user.get('age').valid">
  <md-input-container>
    <input mdInput type="number" formControlName="age" placeholder="Age" validate-onblur>
  </md-input-container>
</div>

事情是提交表单时会显示验证错误，我希望焦点和滚动移动到那里？请帮忙？

Answer 1

将指令实现移至输入，以便您可以直接引用它。要在开始时停用触发，请设置一个属性。提交表单时直接在模板中更改该属性。在指令中使用 DoCheck 来跟踪输入的有效性并触发滚动和焦点：

HTML：

<form (submit)="start = user.get('email').valid; onSubmit(); " ....>
.....

<input  [scrollTo] = "!user.get('email').valid && !start"  ....>
<span [hidden] = "user.get('email').valid">
    <small>Invalid email</small>
</span>

组件

   start = true;

指令：

export class ScrollDirective implements DoCheck {
  constructor(private elRef:ElementRef) {}

  @Input()  scrollTo ;


  ngDoCheck(){
      if(this.scrollTo) { 
          this.elRef.nativeElement.scrollIntoView();
          this.elRef.nativeElement.focus(); 
        } 
}

DEMO

---

旧答案：

您正在检查包装器中的 user.get('email').touched ，该包装器在开始时为 false ，整个跨度被删除并且 scrollTo 被忽略。将指令移动到实际输入并进行更改