Question

我有一个问题是使用Angular.j来设置/清除边框颜色属性。我的要求是当用户点击提交按钮而不填写表单输入字段时，将显示验证消息以及相应的输入字段＆＃39 ; s边框颜色将为红色。当用户输入数据时，它将再次移至以前的状态。我正在解释下面的代码。

<div class="input-group bmargindiv1 col-md-12">
  <span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Title :</span>
  <input type="text" name="colgmname" id="procolgtitle" class="form-control" placeholder="Add College Title" ng-model="colgname" ng-keypress="clearField('procolgtitle');">
  <input type="button" class="btn btn-success" ng-click="addProfileData();" id="addProfileData" value="submit" />
</div>

请检查我的以下控制器文件代码。

$scope.addProfileData = function(billdata) {
    //console.log('button name',$scope.buttonName);
    if ($scope.colgname == null) {
        alert('College Title field could not be blank...');
        focusField.borderColor('procolgtitle');
    }
}

$scope.clearField = function(id) {
    focusField.clearBorderColor(id);
}

dashboard.factory('focusField', function($timeout, $window) {
    return {
        borderColor: function(id) {
            $timeout(function() {
                var element = $window.document.getElementById(id);
                if (element) {
                    element.focus();
                    element.style.borderColor = "red";
                }
            });
        },
        clearBorderColor: function(id) {
            $timeout(function() {
                var element = $window.document.getElementById(id);
                if (element) {
                    element.style.borderColor = "#555555";
                }
            });
        }
    }
});

这里发生了类似我的要求，但问题是假设第一次用户点击提交按钮而没有填充红色边框即将到来的一些数据然后用户输入一些数据红色边框消失。再次用户清除输入的所有类型数据字段并单击提交按钮红色边框不会第二次出现。请帮我解决此问题。

Answer 1

这是因为$scope.colgname第二次不为空（它等于''）。您可以用以下代码替换您的代码：

if ($scope.colgname == null || $scope.colgname == '') {
    //...
}

或者这个：

if (!($scope.colgname)) {
    //...
}

无法使用angular.js清除边框颜色属性

1 个答案: