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？

Answer 1

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

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({            
    ...
    "to": [this.details.To, [Validators.required, validateMinDate(() => this.details.From)]]
});

这DateFunc只是您可以创建的类型

export interface DateFunc{
 (): Date
}

并期望this.details.From返回类型的值Date

Answer 2

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

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

Answer 3

我怎么看它，将应用在表单组的验证，或者如果你有一个大表格，我建议你创建一个嵌套组from和to和应用上的验证，否则这个自定义的验证，将被解雇，只要任何变化发生在形式上。所以这意味着将验证器和表单组更新为：

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在表单上使用。