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

我编写了一个自定义验证器，用于检查某个日期是否高于某个最小日期

代码如下所示：

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)]]
    });

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

我可以看到正在应用验证程序，但是当我

console.log（）

验证程序中的我的最小值时，我可以看到它等于

null

this.details.From

在初始化表单时以null开头，因此我假设参数不是动态的，在设置表单时只取值

---

当用户选择from日期并因此更改

this.details.from

的值时，如何确保min date正在更新？

我的看法是，在表单组上应用验证程序，或者如果您有一个大表单，我建议您为

from

和

to

创建一个嵌套组，并在该组上应用验证程序，否则每当表单发生任何更改时，都会触发此自定义验证程序。因此，这意味着将验证器和formgroup更新为：

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

export function validateMinDate(): ValidatorFn {
    return (c: AbstractControl) => {
      if(c) {
        let isValid = c.get('to').value >= c.get('from').value;
        if (isValid) {
            return null;
        } else {
            return {validateMinDate: true};
        }
      }
    };
}

---

当然，还有其他选项，如侦听更改事件，然后检查日期，如果无效，请在表单上使用

setErrors

。

@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;
    }
  }
}

从'@angular/forms'导入{FormControl，Validators，ValidatorFn，AbstractControl}；
导出类时间验证器扩展验证器{
静态isTimeBefore（timeStr:string）：验证器fn{
return（c:AbstractControl）：{[key:string]：boolean}| null=>{
如果（c.value！==undefined&（isNaN（c.value））| | c.value>timeStr | | c.value==timeStr）{
返回{
“isTimeBefore”：真
}
}
返回null；
}
}
静态isTimeAfter（timeStr:string）：验证器fn{
return（c:AbstractControl）：{[key:string]：boolean}| null=>{
如果（c.value！==undefined&（isNaN（c.value））&&（c.value

---

初始化

定义表单FormGroup

后调用

onChanges（）

函数。您可以修改自定义验证器，将函数作为参数，如

export function validateMinDate(min: DateFunc): 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)]]
    });

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

DateFunc

只是一种您可以像这样创建的类型

export interface DateFunc{
 (): Date
}

---

并期望

this.details.From

返回类型

Date

的值，您可以尝试使用验证器作为指令并注入一个服务，您可以使用this.details.From的最新值进行更新。您需要做的是从

Date观看
，在每次更改中，您都必须将验证器重置为控件
，
，您是否使用日期选择器？或者只是一个简单的输入@征服者沙基我的回答以“我如何看待它…”开头，意思是我将如何修改自定义验证器的外观。@征服者沙基我想我们只需同意不同意：）它解决了潜在的问题，即检查
至
日期是否不小于
自
日期。已解决我的问题，但现在我不知道如何显示错误消息：/