可以通过以下代码实现：

1. 在HTML中添加一个滚动DIV：

2. 在组件中获取这个滚动DIV的引用并在需要时滚动到第一个无效输入：

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;
  
  // 获取滚动DIV的引用
  @ViewChild('scrollDiv') scrollDiv: ElementRef;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 创建FormGroup并添加验证规则
    this.form = this.fb.group({
      // 表单的输入框组件以及规则
    });
  }

  onSubmit() {
    // 标记表单中的所有输入框为“脏”，这样它们将显示出验证消息
    this.markFormGroupTouched(this.form);

    // 如果表单中存在无效输入
    if (this.form.invalid) {
      // 获取第一个无效输入的DOM元素
      const invalidInput = this.scrollDiv.nativeElement.querySelector('input.ng-invalid');

      // 滚动到第一个无效输入
      invalidInput.scrollIntoView({ behavior: 'smooth' });
    }
  }

  markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();

      if (control instanceof FormGroup) {
        this.markFormGroupTouched(control);
      }
    });
  }
}

上述代码中，我们使用Angular的@ViewChild装饰器获取了滚动DIV的引用。然后在onSubmit()方法中，我们首先标记