Angular 2响应式表单校验：提交时滚动至错误位置代码是否正确？

首先可以明确说：你现有的代码不正确，抛出的TypeError: Cannot read property 'focus' of null错误，根源在于两个核心问题：

问题分析 #

1. 时机错误：你在ngAfterViewInit钩子中执行查找无效元素的逻辑，但这个钩子是组件视图刚初始化完成时触发的——此时表单还没经过任何校验（用户没输入、没点击提交），所有控件还处于未触碰状态，根本不会有.ng-invalid类的元素，所以querySelector('.ng-invalid')返回null，调用focus()自然报错。
2. 逻辑不符需求：你的需求是点击提交按钮时才滚动到错误位置，但现有代码是页面加载时就执行，完全不符合触发时机的要求。

正确实现方案 #

要实现点击提交时滚动到第一个无效必填项，需要在提交事件中先触发表单全量校验，再定位到错误元素，具体步骤和代码如下：

1. 模板部分（示例） #

假设你的响应式表单结构如下，注意要确保表单控件正确绑定formControlName：

<form [formGroup]="userForm" #formRef="ngForm">
  <!-- 必填项：姓名 -->
  <div class="form-field">
    <label>姓名</label>
    <input formControlName="fullName" class="form-input">
    <span *ngIf="userForm.get('fullName').invalid && userForm.get('fullName').touched" class="error-text">
      姓名为必填项
    </span>
  </div>

  <!-- 必填项：邮箱 -->
  <div class="form-field">
    <label>邮箱</label>
    <input formControlName="email" class="form-input">
    <span *ngIf="userForm.get('email').invalid && userForm.get('email').touched" class="error-text">
      请输入有效的邮箱地址
    </span>
  </div>

  <button type="button" (click)="handleSubmit()">提交表单</button>
</form>

2. 组件逻辑部分 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化响应式表单，添加校验规则
    this.userForm = this.fb.group({
      fullName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  handleSubmit(): void {
    // 第一步：标记所有表单控件为已触碰，触发全量校验
    this.markAllControlsAsTouched(this.userForm);

    // 如果表单无效，定位到第一个错误元素
    if (this.userForm.invalid) {
      // 排除form本身的.ng-invalid类，找到第一个真正的无效控件
      const firstInvalidEl = document.querySelector('.ng-invalid:not(form)');
      if (firstInvalidEl) {
        // 平滑滚动到错误元素位置，居中对齐
        firstInvalidEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // 聚焦到该元素，引导用户修改
        (firstInvalidEl as HTMLElement).focus();
      }
      return; // 表单无效，终止提交流程
    }

    // 表单有效，执行后续提交逻辑（比如调用API）
    console.log('表单提交成功:', this.userForm.value);
  }

  // 递归遍历所有表单控件，标记为已触碰（触发校验）
  private markAllControlsAsTouched(formGroup: FormGroup): void {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();
      // 如果是嵌套的FormGroup，继续递归处理
      if (control instanceof FormGroup) {
        this.markAllControlsAsTouched(control);
      }
    });
  }
}

关键细节说明 #

• markAllControlsAsTouched方法：递归标记所有控件为已触碰，确保所有校验规则都被触发，对应的.ng-invalid类会被添加到无效控件上，这样才能通过querySelector找到目标元素。
• querySelector('.ng-invalid:not(form)')：因为表单本身在无效时也会被添加.ng-invalid类，所以需要用:not(form)排除，确保找到的是具体的输入控件。
• scrollIntoView：使用behavior: 'smooth'实现平滑滚动，提升用户体验，block: 'center'让错误元素在视口中居中显示。

内容的提问来源于stack exchange，提问作者Diggi