Угловая динамическая реактивная форма: создание пользовательской проверки даты

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

Так, например, если мы передадим параметры, как показано ниже

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

Это создаст 2 formControls на основевышеуказанная логика в условии DATERANGE if: create_date_to и create_date_from

Как применить пользовательскую проверку в функции createFormGroup, чтобы установить, что create_date_to не должен начинаться до create_date_from, которые обаJavaScript date objects

Answer 1

Ваш сценарий может быть реализован через Rxwebvalidators. Я использовал валидатор minDate для @ rxweb / реактивная форма-валидаторы.

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

Я установил валидатор в вашем FormCtrol '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

В этом примере введите значение в формате мм / дд / гггг. Вы можете изменить формат в зависимости от ваших потребностей.