Question

我目前正在阅读关于AngularJS的这本书，但是即使在我从书中输出示例编码之后我仍然无法理解，我仍然无法理解这一部分。我错过了什么吗？标题是关于使用简单验证和推迟反馈，但不知何故它不起作用。我做了一些测试来尝试正在发生的事情，如果我没有错，那么控制器内的addUser方法即使在phpStorm中也找不到myForm变量，它表示Unresolved变量。但我几次检查了这本书的例子，我并没有把变量写错。在最底层，我使用内联绑定调用$scope.showValidation

<!DOCTYPE html>
    <html ng-app="exampleApp">
    <head>
        <title>Forms</title>
        <script src="angular.js"></script>
        <link href="bootstrap.css" rel="stylesheet"/>
        <link href="bootstrap-theme.css" rel="stylesheet"/>
        <script>
            angular.module("exampleApp", [])
                    .controller("defaultCtrl", function ($scope) {
                        $scope.addUser = function (userDetails) {
                            if(myForm.$valid){
                                $scope.message = "(" + userDetails.email + ")";
                                $scope.showValidation = false;
                            }else{
                                $scope.showValidation = true;
                            }
                        };

                        $scope.message = "Ready";

                        $scope.getError = function(error){
                            if (angular.isDefined(error)){
                                if(error.required){
                                    return "Please enter a value";
                                }else if(error.email){
                                    return "Please enter a valid email address";
                                }
                            }
                        };
                    });
        </script>
        <style>
            form.validate .ng-invalid-required.ng-dirty { background-color: lightpink; }
            form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; }
            div.error {color: red; font-weight: bold;}
        </style>
    </head>
    <body>
    <div id="todoPanel" class="panel" ng-controller="defaultCtrl">
        <form name="myForm" novalidate ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''">
            <div class="well">
                <div class="form-group">
                    <label>Email:</label>
                    <input name="userEmail" type="email" class="form-control"
                           required ng-model="newUser.email">
                    <div class="error" ng-show="showValidation">
                        {{getError(myForm.userEmail.$error)}}
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-block">OK</button>
            </div>
        </form>
        <div class="well">
            {{message}}<br>
            {{myForm.$valid}}<br>
            {{showValidation}}<br>
        </div>
    </div>
    </body>
    </html>

angularJS推迟验证反馈 - 学习（帮助）

0 个答案: