Angular响应式表单中如何在用户输入满6个字符后自动触发函数

实现思路 #

监听OTP输入框的内容变更，当输入内容长度达到6位且内容合法时，自动调用提交方法。以下提供两种常用实现方式：

方式一：响应式表单原生valueChanges监听（更符合Angular响应式表单设计规范） #

1. 修改TS组件代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { takeUntil, debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit, OnDestroy {
  otpForm: FormGroup;
  // 用于销毁时取消订阅，避免内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private fb: FormBuilder) {
    // 初始化表单，添加对应校验规则
    this.otpForm = this.fb.group({
      otp: ['', [
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(6)
      ]]
    });
  }

  ngOnInit(): void {
    // 监听otp输入框的数值变化
    this.otpForm.get('otp')?.valueChanges
      .pipe(
        // 可选：添加100ms防抖，避免快速输入时多次触发
        debounceTime(100),
        takeUntil(this.destroy$)
      )
      .subscribe(inputVal => {
        // 去除空格后判断长度为6，且表单校验通过再触发提交
        if (inputVal?.trim().length === 6 && this.otpForm.valid) {
          this.submitOtp();
        }
      });
  }

  submitOtp(){ 
    // 调用验证OTP的接口逻辑
  }

  ngOnDestroy(): void {
    // 销毁订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. HTML代码无需修改，保持原有代码即可 #

<form style="margin-left: 17px;" [formGroup]="otpForm" (ngSubmit)="submitOtp()">
  <mat-form-field appearance="outline">
        <input matInput placeholder="6 digit OTP" formControlName="otp" class="form-control" numbersOnly
         maxLength="6" minLength="6" required autocomplete="off">
  </mat-form-field>
</form>

方式二：模板绑定input事件（更简单轻量） #

1. 修改HTML代码，给input添加input事件绑定 #

<form style="margin-left: 17px;" [formGroup]="otpForm" (ngSubmit)="submitOtp()">
  <mat-form-field appearance="outline">
        <input matInput placeholder="6 digit OTP" formControlName="otp" class="form-control" numbersOnly
         maxLength="6" minLength="6" required autocomplete="off"
         (input)="handleOtpInput($event)">
  </mat-form-field>
</form>

2. TS中添加对应事件处理方法 #

handleOtpInput(event: Event): void {
  const inputVal = (event.target as HTMLInputElement).value.trim();
  if (inputVal.length === 6 && this.otpForm.valid) {
    this.submitOtp();
  }
}

submitOtp(){ 
  // 调用验证OTP的接口逻辑
}

注意事项 #

• 确保你的numbersOnly指令正常生效，避免用户输入非数字内容触发提交
• 两种方式都添加了表单合法性校验，避免不符合规则的内容被提交
• 如果需要防止重复提交，可以在submitOtp方法里加个加载状态锁，避免多次调用接口

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