Reputation: 11
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