Angular响应式表单：设置值后用TypeScript触发Input的blur事件

下面提供几种可行的实现方式，根据你的需求选择：

方式一：通过ViewChild获取原生输入框触发blur #

在模板中给matInput添加模板引用变量，然后在组件中获取到原生DOM元素，直接调用其blur()方法。注意如果是在设置值后立即调用，可能需要放到下一个变更检测周期（比如用setTimeout），确保DOM已更新。

模板代码：

<form [formGroup]="myForm">
  <mat-form-field>
    <input matInput formControlName="userInput" #inputRef (blur)="onInputBlur()">
  </mat-form-field>
</form>

组件代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  myForm: FormGroup;
  @ViewChild('inputRef') inputElement: ElementRef<HTMLInputElement>;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      userInput: ['']
    });
  }

  setValueAndTriggerBlur() {
    // 设置表单控件值
    this.myForm.get('userInput')?.setValue('预设值');
    
    // 触发blur事件
    setTimeout(() => {
      this.inputElement.nativeElement.blur();
    });
  }

  onInputBlur() {
    // 这里写你需要执行的后续方法
    console.log('blur事件触发，执行操作');
  }
}

方式二：直接调用blur绑定的处理函数 #

如果你的blur事件已经绑定了对应的处理方法，最直接的方式就是设置值后直接调用该方法，无需触发DOM事件。

修改setValueAndTriggerBlur方法：

setValueAndTriggerBlur() {
  this.myForm.get('userInput')?.setValue('预设值');
  // 直接调用blur对应的处理函数
  this.onInputBlur();
}

方式三：标记表单控件为已触碰（Touched）并监听状态 #

如果你的逻辑依赖于表单控件的touched状态，可以通过markAsTouched()方法手动标记控件为已触碰，再通过监听控件状态变化来执行逻辑。

组件代码示例：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      userInput: ['']
    });
  }

  ngOnInit() {
    // 监听控件值变化，当控件已触碰时执行逻辑
    this.myForm.get('userInput')?.valueChanges.pipe(
      filter(() => this.myForm.get('userInput')?.touched)
    ).subscribe(value => {
      // 执行后续操作
      console.log('控件已触碰且值变化，执行操作');
    });
  }

  setValueAndTriggerBlur() {
    this.myForm.get('userInput')?.setValue('预设值');
    // 标记控件为已触碰
    this.myForm.get('userInput')?.markAsTouched();
  }
}

注意事项 #

• 如果使用ViewChild获取元素，确保元素在组件初始化时已存在（如果有*ngIf等条件渲染，可能需要改用ViewChildren或在元素渲染完成后再调用）。
• 使用setTimeout是为了确保Angular完成变更检测，DOM更新后再触发blur，避免元素状态未同步的问题。

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