我应该如何在指令中显示 html 中的错误消息。我正在构建一个自定义验证指令答案

【问题标题】：How should I show the error message in html from a directive.I am building a custom validation directive我应该如何在指令中显示 html 中的错误消息。我正在构建一个自定义验证指令
【发布时间】：2016-09-09 02:41:23
【问题描述】：

<!DOCTYPE html>
<html><!--starting of html-->
<script src="angular.js"></script>
<body ng-app="myApp">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myInput" type="date" ng-model="myInput" required my-directive="mydate">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
<p ng-if={{myForm.myInput.$valid}}>Working yo</p>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function($filter) {
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            if(attr.myDirective=='email'){
            function myValidation(value) {
                if (value.indexOf("@") > -1) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }//html
        }
        if(attr.myDirective=='strIng'){
            function myValidation(value) {
                if (value.length > 3) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
        }//angular
        if(attr.myDirective=='phone'){
            function myValidation(value) {
                var re=/^8.\d{8}$|^9.\d{8}$|^7.\d{8}$/;
                //var re=69;
                if (value.match(re)) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
        }
         if(attr.myDirective=='credit'){
            function myValidation(value) {
                // for credit card validation

                if (value.match(/^4[0-9]{12}(?:[0-9]{3})?$/)) {
                    mCtrl.$setValidity('charE', true);
                    $scope.name="VISA";
                }
                if(value.match(/^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/)){
                     mCtrl.$setValidity('charE', true);
                    $scope.name="Master Card";
                }
                if(value.match(/^3[47][0-9]{13}$/)){
                     mCtrl.$setValidity('charE', true);
                    $scope.name="American Express";
                }
                if(value.match(/^3(?:0[0-5]|[68][0-9])[0-9]{11}$/)){
                     mCtrl.$setValidity('charE', true);
                    $scope.name="Diners Club";
                }
                if(value.match(/^6(?:011|5[0-9]{2})[0-9]{12}$/)){
                     mCtrl.$setValidity('charE', true);
                    $scope.name="Discover";
                }
                if(value.match(/^(?:2131|1800|35\d{3})\d{11}$/)){
                     mCtrl.$setValidity('charE', true);
                    $scope.name="JCB";
                }

                 else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
        }
        if(attr.myDirective=='otp'){
            function myValidation(value) {
                if (value.isUpperCase) {
                    mCtrl.$setValidity('charE', false);
                } else {
                    mCtrl.$setValidity('charE', true);
                }
                return value;
            }
        }

    if(attr.myDirective=='mydate'){//validation for date of birth
            function myValidation(value) {
                var db=new Date();
                console.log(db);
                if (value<db) {
                    mCtrl.$setValidity('charE', true);
                    return{
                        template:"<p>working here</p>"
                    }
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                  return(value);
            }
        }
            mCtrl.$parsers.push(myValidation);
        }

    };
});

</script>
</body>
</html>

虽然我无法获得所需的输出。这是自定义验证指令的代码，我只需要知道如何从指令中传递模板以让用户看到他做错了什么。

【问题讨论】：

标签： html angularjs node.js

【解决方案1】：

尝试使用 ngMessages https://docs.angularjs.org/api/ngMessages/directive/ngMessages

<form name="myForm">
   <input name="myInput" type="date" ng-model="myInput" required my-directive="mydate">
   <div ng-messages="myForm.myInput.$error" role="alert">
      <div ng-message="charE">charE</div>
      <div ng-message="something">...</div>
      ...
   </div>
</form>

【讨论】：

我的问题是我们如何将模板从指令内部传递到我们的 html。

【解决方案2】：

您也可以使用角度 bootstrap Alert directive 来显示错误。它允许您传入自己的模板来覆盖默认值。

【讨论】：