angular - 如果出现 md-error，则聚焦 FormControl

Question

有时我们正在创建具有许多输入控件的表单，这些控件使容器(例如 div) 能够显示垂直滚动条。

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

如果提交表单时触发了 md 错误，是否可以滚动和聚焦表单控件？

Answer 1

您可以尝试使用 Directive 并将其放在 Form Control 的顶部。

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(); 
        } 
    }

}