2

目前这是我的代码：

<!doctype html>
<html ng-app="validation-example">
<head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <link href="http://docs.angularjs.org/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/font-awesome.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/docs.css" rel="stylesheet" />
    <link href="StyleSheet.css" rel="stylesheet" />

    <script src="script.js"></script>
</head>
<body style="background-color: teal">
    <link href="StyleSheet.css" rel="stylesheet" />

    <div ng-controller="Controller">
        <form name="form" class="css-form" novalidate>
            Float:        
          <input type="text" ng-model="length" name="length" smart-float />
            {{length}}<br />
            <span ng-show="form.length.$error.float">This is not a valid float number!</span>
            <br />
            <button ng-click="submit()"
                ng-disabled="form.$invalid">
                Submit</button>
        </form>
    </div>
</body>
</html>

和js

var app = angular.module('validation-example', []);

function Controller($scope) {
    $scope.master = {};

    $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
    };   

    $scope.reset();

    $scope.submit = function () {
        debugger;
        if (form.$invalid)
        {
            alert("sss");
        }
    };
}

var FLOAT_REGEXP = /^\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (FLOAT_REGEXP.test(viewValue)) {
                    ctrl.$setValidity('float', true);
                    return parseFloat(viewValue.replace(',', '.'));
                } else {
                    ctrl.$setValidity('float', false);
                    return undefined;
                }
            });
        }
    };
});

当浮动无效时，我禁用了按钮。但是，我希望始终在函数中启用提交按钮并在服务器上检查表单是否无效并向用户发出警报，因为我们有无效数据，所以提交被中断。应用类绑定时，我可以“form.$invalid”，但如果我将其删除以允许无效提交，则在函数中 if (form.$invalid) 未定义。如果表单中有无效输入，如何检查控制器？我可以遍历元素并检查 ng-invalid css 类，但这是最愚蠢的想法，所以请提出一个聪明的解决方案。

4

1 回答 1

2

表单的所有错误都设置为$scope.formName.$error对象。我刚刚使用 Chrome 的开发人员工具检查了为此对象设置的属性，发现该对象根据错误类型将所有验证错误保存在不同的数组中。下面的截图会给你一个更好的主意：

$error 对象属性

我检查时使用的示例代码可在jsfiddle上找到

您需要遍历这些属性并构建您希望在弹出窗口中显示的错误消息。

于 2013-06-04T10:46:18.767 回答