Angular 4 - 使用动态参数值的自定义验证程序

我写了一个自定义验证程序，用于检查日期是否高于某个最小日期。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 
       } 
      }; 
     } 
    }; 
}

我initate这样

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的值？

来源

2017-10-20 Nicolas

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

你所要做的就是观看'From'日期，在每次更改中你都必须将验证器重置为控件'to'，你使用的是日期选择器吗？或者只是一个简单的输入。？ –

我如何看待它，是将验证器应用于表单组，或者如果您有大表单，我建议您为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}; 
     } 
     } 
    }; 
}

当然还有其他选择，例如侦听change事件，然后执行日期的检查，如果无效，使用setErrors在形式上。

来源

2017-10-20 16:04:13 Alex

这不是他所要求的...... – ConquerorsHaki

@ConquerorsHaki我的答案以“我怎么看它......”开始，这意味着我将如何修改自定义验证器的样子。 – Alex

Angular 4 - 使用动态参数值的自定义验证程序

回答

相关问题