Angular与TypeScript中如何使用变量简化表单校验条件语句

架构老林

2026-9-28

原写法可行性判定

你当前编写的checkCondition函数不可行，确实返回的是字符串而非布尔类型的校验结果：你用模板字符串拼接出的是逻辑表达式的文本内容，Angular模板绑定拿到非空字符串会统一判定为真值，所有表单项都会被加上is-invalid类，完全达不到动态校验的效果。

正确实现方案

直接通过方括号访问表单控件对象的对应属性，获取到指定的表单控件后再做校验判断即可，示例代码如下：

public checkCondition(attribute: string): boolean {
  const targetControl = this.f[attribute];
  // 容错处理：传入不存在的控件名时直接返回false，避免控制台报错
  if (!targetControl) {
    return false;
  }
  return targetControl.invalid && (targetControl.dirty || targetControl.touched);
}

模板使用注意

使用时注意模板内的引号嵌套规则，外层用双引号绑定属性时，内层传字符串参数用单引号即可，示例如下：

<!-- 名称输入框 -->
<input
    type="text"
    formControlName="name"
    [ngClass]="{'is-invalid': checkCondition('name')}"
>
<!-- 邮箱输入框 -->
<input
    type="email"
    formControlName="email"
    [ngClass]="{'is-invalid': checkCondition('email')}"
>