如何仅在输入框值验证通过时将其传递给Angular组件

实现方案 #

你可以通过以下两种方式实现仅邮编验证通过才触发目标方法的需求：

方式1：模板事件内直接添加验证状态判断 #

借助Angular响应式表单内置的控件验证状态，直接在触发change事件时先判断控件是否验证通过，仅通过时执行方法。替换你原有的input标签代码即可：

<mat-form-field appearance="fill" class="formField">
  <mat-label>Postalcode</mat-label>
  <input #postal formControlName="postal" matInput type="text" 
         (change)="yourForm.get('postal').valid && onPostalInput(postal.value)">
</mat-form-field>

注意：请将上述代码中的yourForm替换为你实际使用的FormGroup实例变量名。

逻辑说明：利用JavaScript短路与特性，只有当postal控件的验证状态为合法时，才会执行后续的onPostalInput方法。

方式2：组件类内监听控件状态变化（更推荐） #

无需在模板绑定change事件，直接在组件内监听表单控件的状态变化，将验证逻辑收拢到组件类中统一维护：

1. 先删除模板中input标签上的(change)绑定
2. 在组件ts文件中添加如下代码：

// 顶部导入依赖
import { Subject, takeUntil } from 'rxjs';

export class YourComponent implements OnInit, OnDestroy {
  // 定义销毁信号，防止内存泄漏
  private destroy$ = new Subject<void>();
  // 你的表单实例，示例名为yourForm，替换为你的实际变量名
  yourForm: FormGroup;

  ngOnInit(): void {
    // 监听postal控件的状态变化
    this.yourForm.get('postal').statusChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(status => {
        if (status === 'VALID') {
          // 验证通过时执行目标方法
          this.onPostalInput(this.yourForm.get('postal').value);
        }
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  // 你的其他业务逻辑...
  onPostalInput(value: string) {
    // 原有逻辑
  }
}

这种方式的优势是模板代码更简洁，后续要调整验证逻辑时不需要修改模板，可维护性更高。

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