Angular 4 - 具有动态参数值的自定义验证器

Question

我写了一个自定义验证器来检查日期是否超过某个最小日期。

代码如下所示：

 export function validateMinDate(min: Date): ValidatorFn {
    return (c: AbstractControl) => {

        if (c == null || c.value == null)
            return null;

        let isValid = c.value >= min;
        if (isValid) {
            return null;
        } else {
            return {
                validateMinDate: {
                    valid: false
                }
            };
        }
    };
}

我像这样启动我的表格

    this.definitionForm = this.fb.group({
        "from": [this.details.From, Validators.required],
        "to": [this.details.To, [Validators.required, validateMinDate(this.details.From)]]
    });

我可以看到正在应用验证器，但是当我 console.log() 我在验证器中的最小值时，我可以看到它等于 null 。

this.details.From 当我启动表单时从 null 开始，所以我假设参数不是动态的并且只是在设置表单时获取值？

当用户选择起始日期并因此更改 this.details.From 的值时，如何确保更新最小日期？

原文由 Nicolas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@Nicolas Validator 仅在不查找更改时才有价值。因此，我们可以通过在值更改时分配新的验证器来动态更改参数值。在您的情况下，您可以这样做：

  onChanges(){
   var self=this;
    this.definitionForm.get('from').valueChanges.subscribe(val => {
     this.from=val;
     this.definitionForm.controls['to'].
     setValidators(Validators.compose([Validators.required,
     TimeValidators.isTimeAfter(this.from)]));
})}

在这里，我创建了一个单独的自定义验证器来比较时间。您可以使用它或修改您的

import { FormControl, Validators,ValidatorFn, AbstractControl} from '@angular/forms';

export class TimeValidators extends Validators{

  static isTimeBefore(timeStr : string): ValidatorFn{
    return(c: AbstractControl): {[key:string]: boolean} | null => {
      if(c.value!==undefined && (isNaN(c.value)) || c.value > timeStr || c.value== timeStr){
        return {
          'isTimeBefore':true
        }
      }
      return null;
    }
  }
  static isTimeAfter(timeStr : string): ValidatorFn{
    return(c: AbstractControl): {[key:string]: boolean} | null => {
      if(c.value!==undefined && (isNaN(c.value)) && (c.value < timeStr || c.value == timeStr)){
        return {
          'isTimeAfter':true
        }
      }
      return null;
    }
  }
}

在初始化 definitionForm FormGroup --- 后调用 onChanges() 函数。

原文由 dharmendra vaishnav 发布，翻译遵循 CC BY-SA 4.0 许可协议