使用Angular处理表单:错误未显示

时间:2016-02-13 19:19:01

标签: javascript html angularjs

我有简单的表格。我需要显示有关我的字段的错误。

<html lang="en" ng-app="MyApp">
    <head></head>
    <body ng-controller="AppCtrl">

        <form name="myForm" id="myForm">
            <input type="text" ng-model="field" name="myField" />
            <div ng-show="myForm.myField.$error" style="color: red">
                {{myForm.myField.$error}}
            </div>
        </form>

        <script src="bower_components/angular/angular.js"></script>
        <script src="controller.js"></script>
    </body>
</html>

这是我的控制器

angular.module('MyApp',[])
    .controller('AppCtrl', function() {
        var form = document.getElementById("myForm");
        var error = {
                myField: 'Error in this field'
        };
        for (var key in error) {
            form[key].$error = error[key];
        }
    });

为什么我看不到关于myField的错误?我只得到'{}'

1 个答案:

答案 0 :(得分:0)

您没有正确地将表单绑定到AngularJS

<form name="myForm" id="myForm">

这表示您的表单被称为myForm,因此在您的控制器中,您应该使用$scope.myForm

无需var form = document.getElementById("myForm");,只需在控制器中使用$scope.myForm

尝试此操作以查看您是否从AngularJS

访问该表单
angular.module('MyApp',[])
    .controller('AppCtrl', function($scope) {
            $scope.myForm.myField.$error = "just to see it work";
});