Unable to render preview for custom widget
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
'form-horizontal': properties.labelPosition === 'left' && !properties.labelHidden,
'row': properties.labelPosition === 'top' && !properties.labelHidden || properties.labelHidden
}">
<div class="form-group">
<label
ng-if="!properties.labelHidden"
ng-class="{ 'control-label--required': properties.required }"
class="control-label col-xs-{{ !properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 12 }}">
{{ properties.label | uiTranslate }}
</label>
<div class="col-xs-{{ 12 - (!properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 0) }}">
<input
type="text" class="form-control"
placeholder="{{ properties.placeholder | uiTranslate }}"
ng-model="properties.value"
name="customInput"
ng-required="properties.required"
ng-readonly="properties.readOnly"
customFormValidators>
<div class="error-msgs" ng-messages="$form.customInput.$error" ng-if="$form.customInput.$dirty">
<div ng-message="emailValidator">Invalid Email ID provided</div>
<div ng-message="ageValidator">Persons aged less than 18 years not eligible</div>
<div ng-message="panValidator">Invalid PAN no entered</div>
<div ng-message="aadhaarValidator">Invalid Aadhaar No entered</div>
<div ng-message="nameValidator">Names cannot have special/numeric characters</div>
</div>
</div>
</div>
</div>
customValidations.js
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):
}
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:*
<div ng-message="properties.validationType">{{properties.displayMsg | uiTranslate}}</div>
</div>
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