Angular-material ng-messages 中的自定义表单错误验证

Question

视图中的自动完成表单域：

<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代码

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

        }
    }
}
});

从上面的代码片段中，我正在尝试为 md-autocomplete 字段城市代码创建自定义错误消息。我有一个城市代码数组，所以当用户故意输入一个不在我的代码列表中的无效城市代码时，我想显示 "Invalid City code"

的 ng-message

我看到我的代码不工作，我每次都从自定义验证函数强制 return true 只是为了验证自定义函数（在指令中）是否已被触发。我看不到任何结果。

Answer 1

正在搜索类似错误。我认为 Angular 指令应该放在元素 "kebab-case" 中。指令驼峰式：

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

元素烤肉串案例：

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

我的回答是为了将来搜索类似错误并得出结论的人。

Angular-material ng-messages 中的自定义表单错误验证

Custom form error validation in Angular-material ng-messages

jquery

angularjs

angularjs-directive

angular-material

md-autocomplete