Unable to render preview for custom widget

1
0
-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

  1. <div ng-class="{
  2. 'form-horizontal': properties.labelPosition === 'left' && !properties.labelHidden,
  3. 'row': properties.labelPosition === 'top' && !properties.labelHidden || properties.labelHidden
  4. }">
  5. <div class="form-group">
  6. <label
  7. ng-if="!properties.labelHidden"
  8. ng-class="{ 'control-label--required': properties.required }"
  9. class="control-label col-xs-{{ !properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 12 }}">
  10. {{ properties.label | uiTranslate }}
  11. </label>
  12. <div class="col-xs-{{ 12 - (!properties.labelHidden && properties.labelPosition === 'left' ? properties.labelWidth : 0) }}">
  13. <input
  14. type="text" class="form-control"
  15. placeholder="{{ properties.placeholder | uiTranslate }}"
  16. ng-model="properties.value"
  17. name="customInput"
  18. ng-required="properties.required"
  19. ng-readonly="properties.readOnly"
  20. customFormValidators>
  21. <div class="error-msgs" ng-messages="$form.customInput.$error" ng-if="$form.customInput.$dirty">
  22. <div ng-message="emailValidator">Invalid Email ID provided</div>
  23. <div ng-message="ageValidator">Persons aged less than 18 years not eligible</div>
  24. <div ng-message="panValidator">Invalid PAN no entered</div>
  25. <div ng-message="aadhaarValidator">Invalid Aadhaar No entered</div>
  26. <div ng-message="nameValidator">Names cannot have special/numeric characters</div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>

customValidations.js

  1. var app = angular.module ('bonitasoft.ui.extensions', []);
  2.  
  3. var INTEGER_REGEXP = /^\-?\d+$/;
  4.  
  5. app.directive('customFormValidators', function() {
  6. return {
  7. require: 'ngModel',
  8. link: function(scope, elm, attrs, ctrl) {
  9.  
  10. function customValidations(ngModelValue, ngViewValue) {
  11.  
  12. // proper nouns should only contain alphabets
  13. // for example, names (space for middle names)
  14. if (/[a-zA-Z]+\s?[a-zA-Z]+/.test(ngModelValue)){
  15. ctrl.$setValidity('nameValidator', true)
  16. }else{
  17. ctrl.$setValidity('nameValidator', false)
  18. }
  19.  
  20. // PAN number validation
  21. if(/some-regex/.test(ngModelValue)){
  22. ctrl.$setValidity('panValidator', true)
  23. }else{
  24. ctrl.$setValidity('panValidator', false)
  25. }
  26.  
  27. // custom validation for email
  28. if(/(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}$)/.test(ngModelValue)){
  29. ctrl.$setValidity('emailValidator', true)
  30. }else{
  31. ctrl.$setValidity('emailValidator', false)
  32. }
  33.  
  34. //Aadhaar number validation
  35. if(/(^\d{12}$)/.test(ngModelValue)){
  36. ctrl.$setValidity('aadhaarValidator', true)
  37. }else{
  38. ctrl.$setValidity('emailValidator', false)
  39. }
  40.  
  41. // age validation
  42. // an age bar of 18 years is mandatory for loan eligibility
  43. if(ngModelValue.getYear() - (new Date().getYear()) > 18){
  44. ctrl.$setValidity('ageValidator', true)
  45. }else{
  46. ctrl.$setValidity('ageValidator', false)
  47. }
  48.  
  49. // Return ngModelValue to display it
  50. return ngModelValue;
  51. }
  52. ctrl.$parsers.push(customValidations);
  53. }
  54. };
  55. });

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):

  1. function($scope){
  2.  
  3. }

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:*

  1. <div class="error-msgs" ng-messages="$form.customInput.$error" ng-if="$form.customInput.$dirty" >
  2. <div ng-message="properties.validationType">{{properties.displayMsg | uiTranslate}}</div>
  3. </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

1 answer

1
0
-1

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

Notifications