JSFiddle - React, Tailwind, and code Playground

by etianqq

HTML

<body ng-app='myapp'>
  <div ng-controller='myController as vm'>
  <label for="_email">邮箱</label>
  <input id="_email" name="email" type="email" ng-required="true" ng-model="vm.form.email" demo-field-error />
  </div>
</body>

JavaScript

angular.module('myapp',[])
	.constant('Errors', {
        email: '不是有效格式的邮箱地址',
        required: '此项不能为空'
    })
    .filter('error', function (Errors) {
        return function (name) {
            return Errors[name] || name;
        }
		})
    .directive('demoFieldError', function ($compile) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtl) {
                // create a new isolated scope, which dose not inherit from parent scope
                var subScope = scope.$new(true);
                subScope.hasError = function(){
                    return ngModelCtl.$dirty && ngModelCtl.$invalid;
                };

                subScope.errors = function(){
                    return ngModelCtl.$error;
                };

                var hint = $compile('<ul class="bf-field-error" ng-if="hasError()"><li ng-repeat="(name, wrong) in errors()" ng-if="wrong">{{name | error}}</li></ul>')(subScope);
                element.after(hint);
            }
        }
    })
    .controller('myController',function(){
    	var vm = this;
    });