Question

我以下面的方式创建角反应形式。

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和create_date_to，则会根据create_date_from中的上述逻辑创建2个formControls

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

Answer 1

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

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

我已经在您的“ create_date_from” Formcontrol中设置了验证器。

下面通过我的更改查看您的代码：

 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格式输入值。您可以根据需要更改格式。

角动态反应形式：创建自定义日期验证

1 个答案: