尝试使用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')
}
}
}
]
}
}