Question

我有一个反应角色表格。页面加载时，表格已经检查错误。

我试图使用一个滚动到错误指令，以便滚动并专注于错误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'）。触及包装器，在开始时为false，删除整个范围并忽略scrollTo。将指令移动到实际输入并进行更改

为什么甚至在我按下“提交”按钮之前验证了Angular Form？

1 个答案: