Buka
Buka

Reputation: 11

Angular formly lumx flex field validation message is not shown

tried to do a simple cross-validation for custom combodate fields using formly-lumx. Validation expression is triggering normally, error is thrown as expected, but the message is not shown on a page. Any other field created without flex container with the same approach to validation works perfectly. Do not hesitate to give some suggestions:

{
      key: 'birthDate',
      type: 'lx-flex',
      templateOptions: {
        flex: {
          container: 'row', // row | column | row-reverse | column-reverse
          wrap: 'nowrap', // nowrap | wrap | wrap-reverse
          align: 'space-between', // flex-start | flex-end | center | space-between | space-around | stretch
          item: 4  // width (between 1 & 12)
        },
        className: 'bgc-red-500', // ng-class
        style: 'height: 60px',
        fields: [
          {
            key: 'daySelect',
            type: 'lx-select',
            templateOptions: {
              flex: {
                item: 1,
                'flex-order': 1
              },
              placeholder: $translate.instant('registration.birthDateDay'),
              required: true,
              allowClear: true,
              selected: 'birthDateDay',
              choice: 'birthDateDay',
              options: dayOptions
            },
            validators: {
              birthdayDate: {
                expression: function(viewValue, modelValue, scope) {
                  var value = modelValue || viewValue;
                  if(angular.isDefined(scope.model.monthSelect) && angular.isDefined(scope.model.yearSelect)){
                    if(!moment(value + " " + scope.model.monthSelect + " " + scope.model.yearSelect, 'DD MM YYYY').isValid()){
                      throw new FormlyValidationException($translate.instant('error.birthday_invalid'));
                    }
                  }
                  return true;
                },
                message: $translate.instant('error.birthday_invalid')
              }
            }
          },
          {
            key: 'monthSelect',
            type: 'lx-select',
            templateOptions: {
              flex: {
                item: 1,
                'flex-order': 2
              },
              placeholder: $translate.instant('registration.birthDateMonth'),
              required: true,
              allowClear: true,
              selected: 'birthDateMonth',
              choice: 'birthDateMonth',
              options: monthOptions
            },
            validators: {
              birthdayDate: {
                expression: function(viewValue, modelValue, scope) {
                  var value = modelValue || viewValue;
                  if(angular.isDefined(scope.model.daySelect) && angular.isDefined(scope.model.yearSelect)){
                    if(!moment(scope.model.daySelect + " " + value + " " + scope.model.yearSelect, 'DD MM YYYY').isValid()){
                      throw new FormlyValidationException($translate.instant('error.birthday_invalid'));
                    }
                  }
                  return true;
                },
                message: $translate.instant('error.birthday_invalid')
              }
            }
          },
          {
            key: 'yearSelect',
            type: 'lx-select',
            templateOptions: {
              flex: {
                item: 1,
                'flex-order': 3
              },
              placeholder: $translate.instant('registration.birthDateYear'),
              required: true,
              allowClear: true,
              selected: 'birthDateYear',
              choice: 'birthDateYear',
              options: yearOptions
            },
            validators: {
              birthdayDate: {
                expression: function(viewValue, modelValue, scope) {
                  var value = modelValue || viewValue;
                  if(angular.isDefined(scope.model.daySelect) && angular.isDefined(scope.model.monthSelect)){
                    if(!moment(scope.model.daySelect + " " + scope.model.monthSelect + " " + value, 'DD MM YYYY').isValid()){
                      throw new FormlyValidationException($translate.instant('error.birthday_invalid'));
                    }
                  }
                  return true;
                },
                message: $translate.instant('error.birthday_invalid')
              }
            }
          }
        ]
      }
    }

Upvotes: 1

Views: 142

Answers (0)

Related Questions