如果引发md-error，请关注FormControl

Question

有时我们创建的表单有许多输入控件，使容器（例如div）能够显示垂直滚动条。

我将此表单定义为FormGroup，并且每个输入都是FormControl，其中包含md-error模板。

如果在提交表单时触发了md-error，则可以滚动并聚焦表单控件吗？

Answer 1

您可以尝试使用相同的指令并将其放在表单控件上。

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

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

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

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

  @Input() set scrollToError(cond) {
      this.isError = cond; 
      if(cond) { 
          this.elRef.nativeElement.scrollIntoView();
          this.elRef.nativeElement.focus(); 
        } 
    }

}