Unable to render preview for custom widget

Q&A
1

Hello,

This is a question related to creation of a custom Input Widget for additional form validation error. When I am working with the UI designer, I am able to set all its properties and see all the views but if I try to preview the same, I don’t see anything. I am unable to fathom why this is happening.

Following is my template (I am not using any controller here. There is a custom asset that I added to add custom validations):
Template

{{ properties.label | uiTranslate }}
Invalid Email ID provided
Persons aged less than 18 years not eligible
Invalid PAN no entered
Invalid Aadhaar No entered
Names cannot have special/numeric characters

customValidations.js

var app = angular.module (‘bonitasoft.ui.extensions’, );

var INTEGER_REGEXP = /^-?\d+$/;

app.directive(‘customFormValidators’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ctrl) {

	function customValidations(ngModelValue, ngViewValue) {
 		
 		// proper nouns should only contain alphabets
 		// for example, names (space for middle names)
 		if (/[a-zA-Z]+\s?[a-zA-Z]+/.test(ngModelValue)){
 			ctrl.$setValidity('nameValidator', true)
 		}else{
 			ctrl.$setValidity('nameValidator', false)
 		}

 		// PAN number validation
 		if(/some-regex/.test(ngModelValue)){
 			ctrl.$setValidity('panValidator', true)
 		}else{
 			ctrl.$setValidity('panValidator', false)
 		}

 		// custom validation for email
 		if(/(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}$)/.test(ngModelValue)){
 			ctrl.$setValidity('emailValidator', true)
 		}else{
 			ctrl.$setValidity('emailValidator', false)
 		}

 		//Aadhaar number validation
	 	if(/(^\d{12}$)/.test(ngModelValue)){
 			ctrl.$setValidity('aadhaarValidator', true)
 		}else{
 			ctrl.$setValidity('emailValidator', false)
 		}

 		// age validation
 		// an age bar of 18 years is mandatory for loan eligibility
 		if(ngModelValue.getYear() - (new Date().getYear()) > 18){
 			ctrl.$setValidity('ageValidator', true)
 		}else{
 			ctrl.$setValidity('ageValidator', false)
 		}
	 
	// Return ngModelValue to display it
	return ngModelValue;
}
ctrl.$parsers.push(customValidations);

}
};
});

I followed this link for creating the custom input widget.
I would be grateful if some assistance/help can be offered in this regard.

Thanks!
Regards,
Megha

EDIT
*
I was able to preview the widget (my mistake was that I didn’t include the empty snippet of the controller shown below):

function($scope){

}

But now my challenge is that the errors are not showing if the form input has been changed.
Is it possible to take the type of validator in properties from the user/designer and then build the div element dynamically?
More precisely, I wish to do something like this:*

{{properties.displayMsg | uiTranslate}}

I am not able to see the error (though I am using the $form.$dirty condition as well). Would appreciate any help that I can get to past this issue.

Thanks
Regards
Megha

2

Hi,

AngularJS normalize the directive name as described here. Therefore, if you name your directive customFormValidators in the JS file, you have to call it custom-form-validators in your template.

Cheers