CODEWITHSUNDEEP
angularjsthymeleaf
Rares
Rares

Reputation: 637

Custom directives with thymeleaf

How can I write custom directives when I use thymeleaf?

Off-topic: For example I saw that if you use required in your input tag you should change it with th:required="required"

How can I do it for a custom directive because I receive this error:

org.xml.sax.SAXParseException: Open quote is expected for attribute "is-email" associated with an element type "input".

When I use this tag:

<input type="email" id="clientEmail" name="clientEmail" class="form-control" ng-model="c.email" th:required="required" minlength="5"
            is-email={{c.email}} />

Custom directive: 

angular.module('app')
.directive('isEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attributes, ctrl) {
      ctrl.$validators.isEmail = function(modelValue, viewValue) {
        if (viewValue) {
          var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return re.test(viewValue);
        }
      }
    }
  }
})

Upvotes: 0

Views: 278

Answers (1)

Ram_T
Ram_T

Reputation: 8484

<input type="email" id="clientEmail" name="clientEmail" class="form-control" ng-model="c.email" th:required="required" minlength="5"
            is-email={{c.email}} />

change this to 

<input type="email" id="clientEmail" name="clientEmail" class="form-control" ng-model="c.email" th:required="required" minlength="5"
            is-email="{{c.email}}" />

You just forgot to mention "{{c.email}}" quotes

Upvotes: 1

Related Questions