Angular 动态响应式表单：创建自定义日期验证答案

【问题标题】：Angular dynamic reactive form: create custom date validationAngular 动态响应式表单：创建自定义日期验证
【发布时间】：2019-07-28 08:56:18
【问题描述】：

我正在通过以下方式创建角度反应形式。

createFormGroup(parameters: any) {
    let group: any = {};
    parameters.forEach(parameter => {
     if (parameter.uiControl === 'DATERANGE') {
      group[parameter.name + '_to'] = parameter.isRequired ? new FormControl(parameter.value || '', [Validators.required]) //create custom validator to compare the 2 date fields
      : new FormControl(parameter.value || '');
      group[parameter.name + '_from'] = parameter.isRequired ? new FormControl(parameter.value || '', [Validators.required])   //create custom validator to compare the 2 date fields
      : new FormControl(parameter.value || '');
     } else {
      group[parameter.name] = parameter.isRequired ? new 
    FormControl(parameter.value || '', Validators.required)
        : new FormControl(parameter.value || '');
     }});    
    return new FormGroup(group);
  }

所以对于ex，如果我们传递参数如下所示

where parameters = [
  {
    "id": 1,
    "name": "create_date",
    "displayName": "Create Date",
    "uiControl": "DATERANGE",
    "dataType": "DATE",
  }
]

它将根据DATERANGE if 条件中的上述逻辑创建2个formControls：create_date_to和create_date_from

如何在createFormGroup 函数中应用自定义验证以设置create_date_to不应在create_date_from 之前开始，它们都是javascript date objects

【问题讨论】：

标签： angular validation date compare angular-reactive-forms

【解决方案1】：

您的场景可以通过 Rxwebvalidators 来实现。我使用了 @rxweb/reactive-form-validators 的 minDate 验证器。

RxwebValidators.minDate({fieldName:parameter.name + '_from'})

我已在您的“create_date_from”表单控件中设置了验证器。

看看你的代码和我的改变：

 group[parameter.name + '_to'] = parameter.isRequired ? new FormControl(parameter.value || '', [Validators.required]) //create custom validator to compare the 2 date fields
      : new FormControl(parameter.value || '', RxwebValidators.minDate({fieldName:parameter.name + '_from'}));

请参阅 stackblitz 链接上的工作示例： https://stackblitz.com/edit/angular-dynamic-min-date-validator-cross-field?file=src/app/app.component.ts

在示例中，以 mm/dd/yyyy 格式输入值。您可以根据需要更改格式。

【讨论】：