Question

我做错了什么但是看不清楚。我已经关注了角度js文档，并且验证无效：

<form name="callbackForm" ng-submit="requestCallback()"> 
  <div class="col-md-3">
    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
  </div>
  <div class="col-md-3">
    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
  </div>
  <div class="col-md-3">
    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
  </div>
  <div class="col-md-3">
    <p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
  </div>
</form>

控制器如下：

'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {

    $scope.requestCallback = function () {

        alert("form callback");

    };
}]);

但是，我无法显示错误消息。 ng-minlength是否也不限制表单提交？我在这里错过了一些简单的东西吗？

Answer 1

您的代码似乎运行良好。

关于错误的提交限制 - 您必须通过执行以下操作明确使用angular的valiation：

<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">

这是一个片段：

function Ctrl($scope) {
  $scope.requestCallback = function() {
    alert("form callback");
  };
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

<div ng-app>
  <div ng-controller="Ctrl">
    <form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
      <div class="col-md-3">
        <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
      </div>
      <div class="col-md-3">
        <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
      </div>
      <div class="col-md-3">
        <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
      </div>
      <div class="col-md-3">
        <p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
        <p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
        <p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
        <p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
      </div>
    </form>
  </div>
</div>

Answer 2

您的表单正在验证..为了调用requestCallback（）函数，您需要将表单绑定到控制器。

使用ng-controller

将表单包裹在控制器中

<div ng-controller="footerController">

<form name="callbackForm" ng-submit="requestCallback()"> 
                <div class="col-md-3">
                    <input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
                </div>
                <div class="col-md-3">
                    <input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
                </div>
                <div class="col-md-3">
                    <input type="submit" class="btn btn-sm btn-block" value="Call Me!">
                </div>
                <div class="col-md-3">
                    <p ng-show="callbackForm.name.$error.required"  || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
                    <p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
                </div>
            </form>

</div>

</div>

AngularJS表单验证不起作用

2 个答案: