Ionic表单自定义验证时pricePerHour始终为false的问题如何解决？

你遇到的核心问题是值传递的时效性问题，同时原校验逻辑的返回规则也存在语义偏差：

• 第一种写法中，你在表单初始化时把pricePerHour的初始值false传给了priceValidator，校验器的闭包会永久持有这个初始值，后续pricePerHour更新也不会同步到校验逻辑中，所以打印出来永远是false。
• 第二种写法仅在表单初始化时做了一次三元判断，后续pricePerHour变化时不会自动更新校验规则，自然不会生效。
• 额外说明：Angular校验器的规则是返回null代表校验通过，返回任意非null对象代表校验失败，对象的键为错误类型，原逻辑返回的{ valid: true }语义容易混淆，建议用规范错误标识。

方案1：校验器直接读取最新变量值 #

不要把pricePerHour作为参数传给校验器，直接在校验逻辑中访问组件实例的最新值即可，注意绑定正确的this指向：

this.myForm = this.formBuilder.group({
  Description: new FormControl('', Validators.required),
  // 绑定this指向组件实例，保证校验器内能拿到最新的组件变量
  PerHour: new FormControl('', [this.priceValidator.bind(this)])
});

priceValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    // 直接读取当前最新的pricePerHour值
    if (this.pricePerHour && !control.value) {
      // 校验不通过返回对应错误标识
      return { required: true };
    }
    return null;
  };
}

方案2：动态增减校验规则 #

监听pricePerHour的变化，主动更新PerHour控件的校验规则，这种方式性能更优，不需要每次校验都做条件判断：

// 初始化表单，PerHour先不设置校验规则
this.myForm = this.formBuilder.group({
  Description: new FormControl('', Validators.required),
  PerHour: new FormControl('')
});

// 在pricePerHour变化的位置调用该方法，比如切换字段显隐的事件回调中
updatePerHourValidators() {
  const perHourControl = this.myForm.get('PerHour');
  if (this.pricePerHour) {
    // 显示字段时添加必填校验
    perHourControl.setValidators(Validators.required);
  } else {
    // 隐藏字段时清空所有校验
    perHourControl.clearValidators();
  }
  // 触发重新校验，同步更新控件和表单的校验状态
  perHourControl.updateValueAndValidity();
}

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