如何在Angular中实现仅对必填字段有效的自定义装载机

<input type="text" name="name" required>

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appRequiredFieldsLoader]'
})
export class RequiredFieldsLoaderDirective {
  @HostListener('submit', ['$event'])
  onSubmit(event: Event) {
    const form = event.target as HTMLFormElement;
    const requiredInputs = form.querySelectorAll('[required]') as NodeListOf<HTMLInputElement>;

    // 验证所有必填字段是否有效
    let isValid = true;
    requiredInputs.forEach(input => {
      if (!input.checkValidity()) {
        isValid = false;
      }
    });

    // 如果必填字段有效，执行装载机逻辑
    if (isValid) {
      // 执行装载机逻辑
    } else {
      event.preventDefault(); // 阻止表单提交
    }
  }
}

<form appRequiredFieldsLoader>
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>