Angular 5监听Mat-Form-Field类变化的技术方案问询

嘿，我来帮你把Angular Material（AM）表单字段的那些状态类触发时机和监听方法理得明明白白～

一、各类状态的触发逻辑 #

首先得区分清楚：ng-pristine/ng-dirty/ng-untouched/ng-touched/ng-invalid其实是Angular原生表单模块自带的状态类，AM只是同步了这些状态到mat-form-field上；而mat-focused是AM专属的焦点状态类。

1. 原生Angular表单状态类 #

这些状态是绑定到表单控件（比如matInput）上，然后mat-form-field会自动同步：

• ng-pristine/ng-dirty：
  • ng-pristine：控件刚初始化、从未被修改过的时候，就是这个状态。
  • ng-dirty：只要用户修改过控件的值（哪怕还没失去焦点），就会立刻从pristine变成dirty，而且一旦变脏就再也不会变回 pristine 状态。
• ng-untouched/ng-touched：
  • ng-untouched：控件从未被用户点击聚焦过，初始状态就是它。
  • ng-touched：当用户聚焦过控件，然后又点击别处让它失去焦点（触发blur事件），就会切换成touched状态，同样是不可逆的。
• ng-invalid/ng-valid：
  • 当控件不满足验证规则时（比如必填项为空、邮箱格式不对），就会加上ng-invalid；验证通过则换成ng-valid。这个状态会随着用户输入实时更新。

2. AM专属的mat-focused类 #

这个就很直观：当mat-form-field内部的输入框（比如matInput）获得焦点时，mat-form-field会立刻加上mat-focused类；当输入框失去焦点时，这个类就会被移除。

二、监听类变化的可行方案 #

你试过@ViewChild、@HostListener这些方式，这里给你两个靠谱的实现思路：

方案1：用MutationObserver监听DOM类变化 #

这是最直接监听DOM类修改的方式，能精准捕捉到mat-form-field的类变化：

1. 先给模板里的mat-form-field加个模板引用：

<mat-form-field #firstNameRegister>
  <input matInput placeholder="First Name" formControlName="firstName">
</mat-form-field>

2. 在组件里通过@ViewChild获取元素，然后用MutationObserver监听：

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements AfterViewInit, OnDestroy {
  @ViewChild('firstNameRegister') firstNameRegister!: ElementRef<HTMLElement>;
  private classObserver: MutationObserver | undefined;

  ngAfterViewInit(): void {
    // 配置只监听类属性的变化
    const observerConfig = { attributes: true, attributeFilter: ['class'] };

    this.classObserver = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'class') {
          const fieldElement = mutation.target as HTMLElement;
          const classList = fieldElement.classList;
          
          // 这里可以根据需要判断具体类的存在
          if (classList.contains('mat-focused')) {
            console.log('FirstName输入框获得焦点啦！');
          }
          if (classList.contains('ng-dirty')) {
            console.log('FirstName的值被修改过了～');
          }
          if (classList.contains('ng-touched')) {
            console.log('FirstName输入框被触摸过了');
          }
          if (classList.contains('ng-invalid')) {
            console.log('FirstName输入不合法哦');
          }
        }
      });
    });

    // 启动监听
    this.classObserver.observe(this.firstNameRegister.nativeElement, observerConfig);
  }

  // 组件销毁时一定要停止监听，避免内存泄漏
  ngOnDestroy(): void {
    this.classObserver?.disconnect();
  }
}

方案2：监听表单控件的状态（更符合Angular风格） #

如果用的是Reactive Forms，其实不用监听DOM类，直接监听表单控件的状态变化更优雅：

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

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      firstName: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    const firstNameCtrl = this.registerForm.get('firstName');
    if (!firstNameCtrl) return;

    // 监听值变化（对应dirty/pristine）
    firstNameCtrl.valueChanges.subscribe(() => {
      console.log('是否已修改值:', firstNameCtrl.dirty);
    });

    // 监听触摸和验证状态
    firstNameCtrl.statusChanges.subscribe(status => {
      console.log('触摸状态:', firstNameCtrl.touched);
      console.log('验证状态:', status); // 输出VALID或INVALID
    });
  }
}

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