基于ngzorro 表单点击提交按钮，滚动到第一个校验不通过的控件

T。454

已于 2023-02-02 09:30:23 修改

阅读量110

点赞数

分类专栏： angular表单控件校验文章标签：前端 angular javascript

于 2023-02-02 09:27:25 首次发布

本文链接：https://blog.csdn.net/weixin_65872253/article/details/128844319

版权

@ContentChildren(NgControl, { descendants: true }) ngControls!: QueryList<FormControlName | FormControlDirective>;

@ContentChildren(NgControl, { descendants: true, read: ElementRef }) ngControlEls!: QueryList<ElementRef>;



  /** 第一个校验不通过的控件索引 */

  firstErIndex!: number;

  /** 是否点击了提交按钮，没有就是no，点了就是ok */

  isClicked = new BehaviorSubject('no');



  constructor() { }



  ngOnInit(): void { }



  // ContentChildren通常只能在元素渲染完成后才能拿到实例

  ngAfterViewInit(): void {

    this.isClicked.pipe(debounceTime(150)).subscribe(res => {

      if (res === 'ok') {

        this.ngControls?.find((el, index) => {

          if (el.status == 'INVALID') {

            this.firstErIndex = index;

            return true;

          } else {

            return false

          }

        });

        if (this.firstErIndex !== undefined && this.firstErIndex !=