Question

在我的项目中，我使用angularjs表单验证，为此我编写了控制器：

// Make an appointment
angular.module('app', []).controller('AppointmentController', ['$scope','$http', function($scope, $http) {

            $scope.response = { response : '' };
            $scope.formData = {
                id: '',
                reason: '',
                phone: 0,
                day : 0,
                month : 0,
                year : 0,
                type : false
            };

            console.log($scope.formData.phone); // Show nothing

            $scope.AppointmentSubmit = function () {

                if ($scope.userForm.$valid) {
                    var request = $http({
                        method: "POST",
                        url: "/other/Appointments",
                        data: $.param($scope.formData),
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    });

                    /* Check whether the HTTP Request is successful or not. */
                    request.success(function (data) {

                    });
                }
            }

        }]);

我的HTML表单如下所示：

<div ng-app="app">
<div class="modal fade appointments-modal in" ng-controller="AppointmentController" id="appointmentsModal" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 787px;"></div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">x</span></button>
                <h3 class="text-center">Titlte</h3>
            </div>
            <div class="modal-body log-form">
                <form ng-hide="response.type" class="form-horizontal" id="loginForm" name="appointment" novalidate="">
                    <div class="form-group birhday-group">

<div class="selectDate">
    <select name="day[]" ng-model="formData.day" required="">
<option value="0">D</option>
</select>   <select name="mouth[]" ng-model="formData.mouth" required="">
<option value="0">M</option>

</select>
            <select name="year[]" ng-model="formData.year" required="">
<option value="0">Y</option>
<option value="2016">2016</option>
<option value="2015" selected="selected">2015</option>
</select>   </div>                        <div class="form-error" ng-show="appointment.day.$invalid &amp;&amp; !appointment.day.$pristine">
                            You must to enter day for appointment
                        </div>
                        <div class="form-error" ng-show="appointment.month.$invalid &amp;&amp; !appointment.month.$pristine">
                            You must to enter month for appointment
                        </div>
                        <div class="form-error" ng-show="appointment.year.$invalid &amp;&amp; !appointment.year.$pristine">
                            You must to enter year for appointment
                        </div>
                        <!--<div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                                2015
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>-->
                    </div>

                    <div class="form-group">
                        <input ng-model="formData.phone" type="text" value="" ng-minlength="7" ng-maxlength="13" class="form-control" name="phone" placeholder="Phone" pattern="(\+?\d[- .]*){7,13}" required="">
                        <div class="form-error" ng-show="appointment.phone.$invalid &amp;&amp; !appointment.phone.$pristine">
                            You must to enter own contact phone
                        </div>
                    </div>


                    <div class="form-group radio-group">
                        <textarea name="reason" ng-model="formData.reason" maxlength="150" placeholder="Reason" required=""></textarea>
                        <div class="form-error" ng-show="appointment.reason.$invalid &amp;&amp; !appointment.reason.$pristine">
                            You must to enter a reason of appointment
                        </div>
                    </div>

                    <div class="form-error" ng-show="response.type === 'error'">
                        <span>{{response.message}}</span>
                    </div>

                    <div class="form-group submit-group">
                        <input type="hidden" name="id" ng-model="formData.id" value="" required="">
                        <button type="submit" ng-click="AppointmentSubmit()" ng-disabled="appointment.$invalid" id="SendRecord" class="btn">Make app</button>
                    </div>
                </form>
            </div>
        </div>
</div>
    </div>
</div>

在此HTML中，我确定了角度为ng-app="app"，ng-controller="AppointmentController"和某些ng-model的形式。

当我打开此窗口时，我总是看到块class="form-error"中显示的错误：

<div class="form-error" ng-show="appointment.reason.$invalid &amp;&amp; !appointment.reason.$pristine">
You must to enter a reason of appointment
</div>

另外如果console.log()控制器没有返回任何内容。为什么会这样？

Answer 1

尝试

ng-show="appointment.reason.$invalid && !appointment.reason.$pristine"

甚至更好

ng-show="appointment.reason.$invalid && appointment.reason.$dirty"

Answer 2

console.log（）`将值发送到控制台，可以通过按f12在plunker或Web浏览器开发工具中看到。它在我的插件中正常工作。我没有收到关于您预约理由的错误消息。

我还在你的html中注释了你隐藏的id字段。它使您的表单无法验证，因此您需要找到另一种方法来处理此问题。

您可以在此处查看我的插件：http://plnkr.co/edit/5viBuC5V9ZB2U8P5pDeI 祝你好运！

<!DOCTYPE html>
<html>

<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>

<script type="text/javascript" src="script.js" charset="utf-8"></script>
</head>

<body>
<div ng-app="app">
<div class="modal fade appointments-modal in" ng-controller="AppointmentController" id="appointmentsModal" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
  <div class="modal-backdrop fade in" style="height: 787px;"></div>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">x</span>
        </button>
        <h3 class="text-center">Title</h3>
      </div>
      <div class="modal-body log-form">
        <form ng-hide="response.type" class="form-horizontal" id="loginForm" name="appointment" novalidate ng-submit="AppointmentSubmit()">
          <div class="form-group birhday-group">
            <div class="selectDate">

              <select name="day" type="number" ng-model="formData.day" required>
                 <option value="0">D</option>
                <option value="0">13</option>
              </select>
              <select name="month" type="number" ng-model="formData.month" required>
                <option value="0">M</option>
                <option value="0">10</option>
              </select>
              <select name="year" type="number" ng-model="formData.year" required>
                <option value="0">Y</option>
                <option value="2016">2016</option>
                <option value="2015" selected="selected">2015</option>
              </select>
            </div>

            <div class="error" ng-show="appointment.day.$invalid && !appointment.day.$pristine">
              You must enter the day for appointment
            </div>
            <div class="error" ng-show="appointment.month.$invalid && !appointment.month.$pristine">
              You must enter the month for appointment
            </div>
            <div class="error" ng-show="appointment.year.$invalid && !appointment.year.$pristine">
              You must enter the year for appointment
            </div>
            <!--<div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                            2015
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                        </ul>
                    </div>-->
          </div>
          <div class="form-group">
            <input ng-model="formData.phone" ng-minlength="7" ng-maxlength="13" class="form-control" name="phone" placeholder="Phone" type='tel' pattern="(\+?\d[- .]*){7,13}" title='Phone Number (Format: +99(99)9999-9999)' required />
              <div>
                You've entered {{formData.phone}}
              </div>

            <div class="form-error" ng-show="appointment.phone.$invalid && !appointment.phone.$pristine">
              You must enter your contact phone
            </div>
          </div>
          <div class="form-group radio-group">
            <textarea name="reason" ng-model="formData.reason" maxlength="150" placeholder="Reason" required></textarea>
            <div class="form-error" ng-show="appointment.reason.$invalid && !appointment.reason.$pristine">
              You must enter a reason for this appointment
            </div>
          </div>
          <div class="form-error" ng-show="response.type === 'error'">
            <span>{{response.message}}</span>
          </div>
          <div class="form-group submit-group">
           <!-- <input type="hidden" name="id" ng-model="formData.id" value="" required /> --> <!-- This kept your form from validating-->
            <input type="submit" class="btn" value="Make Apt" ng-disabled="appointment.$invalid" id="SendRecord"/>
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>
 </div>
</body>

</html>

你的script.js

// Code goes here

// Make an appointment
angular.module('app', []).controller('AppointmentController', ['$scope','$http', function($scope, $http) {

        $scope.response = { response : '' };
        $scope.formData = {
            id: '',
            reason: '',
            phone: 0,
            day : 0,
            month : 0,
            year : 0,
            type : false
        };

        console.log($scope.formData.phone); // Displays in the console, which you can see by pressing F12

        $scope.AppointmentSubmit = function() {

            if ($scope.appointment.$valid) {
                var request = $http({
                    method: "POST",
                    url: "/other/Appointments",
                    data: $.param($scope.formData),
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                });

                /* Check whether the HTTP Request is successful or not. */
                request.success(function (data) {

                });
            }
        }

    }]);

为什么Angularjs始终显示错误消息？

2 个答案: