未显示角度形式的lumx flex字段验证消息

时间:2016-09-26 00:35:10

标签: angularjs validation flexbox angular-formly lumx

尝试使用formly-lumx对自定义combodate字段进行简单的交叉验证。验证表达式正常触发,错误按预期抛出,但邮件未显示在页面上。使用相同的验证方法创建的没有flex容器的任何其他字段都可以完美地工作 不要犹豫,提出一些建议:

{
      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')
              }
            }
          }
        ]
      }
    }

0 个答案:

没有答案