matDatepickerMax 验证的 Angular 表单问题答案

【问题标题】：Angular Form problem with matDatepickerMax validationmatDatepickerMax 验证的 Angular 表单问题
【发布时间】：2020-10-08 17:53:51
【问题描述】：

我正面临以下问题，也许你们中的一些人知道如何解决它。我有一个包含不同字段的 formGroup，其中一个是带有 mat 日期选择器的日期字段。我正在以编程方式更改日期选择器输入的 [max] 属性，但表单始终使用 max 属性中的第一个值进行验证，并且我收到错误“matDatepickerMax”。任何想法，正如我所见，输入工作正常并且最大值已正确更新，但表单组始终使用旧值进行验证。提前致谢

【问题讨论】：

您能创建一个 Stackblitz 示例来显示您的错误吗？

标签： angular angular-material angular-reactive-forms

【解决方案1】：

@Franco，当你创建一个验证器时，你传递的值就是当下的值。愚蠢的例子

data={name:'one'}
form=new FormGroup({
   name:new FormControl(data.name)
   control:new FormControl('',this.foolValidator(data.name))
})

foolValidator(name:string)
{
    //only gives error if control.value is "one"
    
    return (control)=>{
       return control.value==name?{repeat:true}:null
    }
}

如果你想考虑一个变量，你可以“绑定”验证器

data={name:'one'}
form=new FormGroup({
   name:new FormControl(data.name)
   control:new FormControl('',this.foolValidator().bind(this))
})

foolValidator()
{
    return (control)=>{
       return control.value==this.form.get('name').value?{repeat:true}:null
    }
}

或者创建一个自定义验证器，例如

foolValidator()
{
    return (control)=>{
       const form=control.parent;
       if (form)
       {
          const name=form.get('name')
          return name && control.value==name.value?{repeat:true}:null
       }
    }
}

在最后一种情况下，不要忘记，当更改“名称”时，请创建一个form.get('control').updateValueAndValidity

【讨论】：