AngularJS:修改innerhtml的验证

AngularJS: Change innerHTMLl on validation

本文关键字：验证 innerhtml 修改 AngularJS      更新时间：2023-09-26

我想根据验证测试的结果更改元素的innerHTML。作为angular.js的新手，我不确定如何实现这一目标。我试图添加自定义directive，但它不起作用。我想对特定元素的所有验证测试作出反应。也许，这里有人能告诉我最好的方法。

这是我的(不工作)代码:

. js 

loginApp.directive('iconValidator', function() {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.iconValidator = function (modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    scope.iconHtml='';
                    return true;
                }
                if (ctrl.$touched && ctrl.$invalid {
                    debuger
                    scope.iconHtml='<i class="fa fa-times-circle fa-lg" style="color:red"></i>';
                    return false;
                }
                scope.iconHtml='';
                return true;
            };
        }
    };
});

. html 

<div class="col-md-6">
    <div class="signup-form">
        <h2>New User Signup!</h2>
        <form action="#" novalidate method="post" name="regForm" ng-submit="submit()">
            <div class="input-group margin-bottom-sm">
                <input type="text" class="form-control" placeholder="Username" iconValidator ng-model="userName" required autofocus/>
                <span class="input-group-addon" ng-bind-html="iconHtml"></span>
            </div>
        </form>
    </div>
</div>

另外，我还包含了模块ngSanitize。

也许有人能帮我把一个图标放在<span>元素作为innerHTML ?

我认为更好的方法是使用ngMessages指令来处理验证错误消息。

例如，它可以像这样:

angular.module('demo', ['ngMessages']).controller('mainController', function($scope) {
    $scope.submit = function() {};
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>
<div class="container" ng-app="demo" ng-controller="mainController">
    <form novalidate="" name="regForm" ng-submit="submit()">
        <div class="form-group">
            <div class="form-group margin-bottom-sm">
                <input type="text" class="form-control" placeholder="Username" name="userName" ng-model="userName" ng-minlength="5" required="" autofocus="" />
                <div ng-messages="regForm.userName.$error" role="alert">
                    <div ng-message="required, minlength">
                        <i class="fa fa-times-circle fa-lg" style="color:red"></i> Username must be at least 5 chars long
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

我用html:

做了解决方案
<i ng-if="regForm.userName.$touched"
   ng-class="{'fa fa-lg fa-times-circle': regForm.userName.$invalid, 'fa fa-lg fa-check-circle':regForm.userName.$valid}"
   ng-style="regForm.userName.$invalid ?{color: 'red'}: {color: 'green'}"/>

我想问，是否有可能消毒这样的html，因为相同的逻辑将有几个组件，我不想复制过去。

相关文章：