Angular自定义指令：实现MatAutocomplete/MatSelect必填时自动选首选项

核心问题分析 #

• 直接访问私有属性_results导致偶发失效
• 表单必填项判断逻辑不准确，无法覆盖所有必填验证场景
• 监听时机不恰当，未处理初始化时选项已加载的情况
• ngFor循环中未适配动态视图更新
• 管道操作符语法错误（takeUntil的括号位置错误）

修正后的指令代码 #

import { Directive, Input, OnInit, AfterViewInit, Optional, OnDestroy } from '@angular/core';
import { MatAutocomplete, MatSelect } from '@angular/material/autocomplete';
import { NgControl, FormControl, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil, distinctUntilChanged, filter } from 'rxjs/operators';

@Directive({ selector: '[msg91AutoSelectDropdown]' })
export class AutoSelectDropDownDirective implements OnInit, AfterViewInit, OnDestroy {
  @Input() control: FormControl;

  private selectedMaterialComponent: MatAutocomplete | MatSelect;
  private destroy$ = new Subject<void>();

  constructor(
    @Optional() private autoComplete: MatAutocomplete,
    @Optional() private matSelect: MatSelect,
    @Optional() private ngControl: NgControl
  ) {}

  ngOnInit(): void {
    this.selectedMaterialComponent = this.autoComplete || this.matSelect;
    if (!this.selectedMaterialComponent) {
      console.warn('msg91AutoSelectDropdown: 未找到MatAutocomplete或MatSelect组件');
      return;
    }
  }

  ngAfterViewInit(): void {
    this.setupAutoSelect();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  private getTargetControl(): FormControl | null {
    return this.control || (this.ngControl?.control as FormControl);
  }

  private isControlRequired(control: FormControl): boolean {
    // 更准确的必填项判断：排除禁用控件，检查验证规则和当前错误状态
    if (control.disabled) return false;
    
    const validator = control.validator;
    if (!validator) return false;

    const validationResult = validator(control);
    // 验证器包含required规则，或控件当前存在required错误
    return !!validationResult?.required || 
           validator === Validators.required ||
           (Array.isArray(validator) && validator.includes(Validators.required));
  }

  private setupAutoSelect(): void {
    const targetControl = this.getTargetControl();
    if (!targetControl) {
      console.warn('msg91AutoSelectDropdown: 未找到有效的FormControl');
      return;
    }

    // 监听选项变化，添加多层过滤确保只在必要时自动选择
    this.selectedMaterialComponent.options.changes
      .pipe(
        takeUntil(this.destroy$),
        distinctUntilChanged((prev, curr) => prev.length === curr.length),
        filter(() => targetControl.value == null || targetControl.value === ''),
        filter(() => this.isControlRequired(targetControl)),
        filter(() => this.selectedMaterialComponent.options.length > 0)
      )
      .subscribe(() => {
        // 使用公共API获取第一个选项，避免依赖私有属性
        const firstOption = this.selectedMaterialComponent.options.first;
        if (firstOption) {
          targetControl.setValue(firstOption.value);
          // 同步MatSelect的选中状态，确保UI与表单值一致
          if (this.matSelect) {
            this.matSelect.value = firstOption.value;
          }
        }
      });

    // 初始化时延迟检查，处理视图已加载完成的场景（比如ngFor循环中的静态数据）
    setTimeout(() => {
      if (targetControl.value == null && this.isControlRequired(targetControl) && this.selectedMaterialComponent.options.length > 0) {
        const firstOption = this.selectedMaterialComponent.options.first;
        if (firstOption) {
          targetControl.setValue(firstOption.value);
          if (this.matSelect) {
            this.matSelect.value = firstOption.value;
          }
        }
      }
    }, 0);
  }
}

关键优化说明 #

• 禁用私有属性依赖：用options.first替代_results，遵循Angular Material公共API规范，避免版本更新导致的失效
• 精准的必填判断：同时覆盖「验证器规则」和「当前控件错误状态」两种场景，支持表单组中的必填验证
• 多层过滤逻辑：跳过已有值、空选项、禁用的控件，避免不必要的赋值操作
• 初始化补查：通过setTimeout等待视图稳定后执行一次检查，解决ngAfterViewInit时选项未完全加载的问题
• 状态同步：手动同步MatSelect的value属性，确保UI显示与表单值一致
• 错误调试支持：添加警告日志，快速定位指令未生效的原因

使用提示 #

• 在ngFor循环中使用时，建议配合*ngIf等待选项数据加载完成后再渲染组件，避免指令初始化时选项为空
• 若使用异步数据源（如HTTP请求），Angular Material会自动触发options.changes事件，无需额外处理
• 如果需要保留初始值，可调整filter(() => targetControl.value == null || targetControl.value === '')的判断逻辑

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