Custom form error validation in Angular-material ng-messages

Question

Autocomplete form field in view:

<md-autocomplete 
md-input-name="cityCode"
... 
md-floating-label="Enter city code" required cityCodeInvalid>

  <ng-messages="searchForm.cityCode.$error" ng-if="search.cityCode.$touched">
    <div ng-message="required">City Code required</div>
    <div ng-message="cityCodeInvalid">City code Invalid</div>
  </ng-messages>

</md-autocomplete>

JS code

var app = angular.module('MyApp',['ngMaterial', 'ngMessages']);

/*
  My controller code: 
  app.controller.....
*/


app.directive('cityCodeInvalid', function() {
return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attributes, ngModel) {
        ngModel.$validators.cityCodeInvalid = function(modelValue) {
            console.log("In custom validate function");
            return true; /* forcibly returning true */

        }
    }
}
});

From the above snippet, I am trying to create a custom error msg for md-autocomplete field city code. I have an array of city codes, so when user deliberately types an invalid city code which is not from the list of codes I have, I wanted to show an ng-message of "Invalid City code"

I see my code is not working, I forced to return true from the custom validation function every time just to verify whether the custom function (in directive) has been triggered or not. I see no results.

Answer 1

Searching for a similar error. I figured that is that Angular Directive should be place in element "kebab-case". Directive camelCase:

app.directive('cityCodeInvalid', function()....

Element kebab-case:

<md-floating-label="Enter city code" required city-code-invalid>

My Answer is for future people searching for a similar error and conclude this question.