javascript - 表单中带有 ng-pattern 的 AngularJS 不会向服务器发送无效字段

Question

我想验证表单中的文本输入，因此在输入与正则表达式匹配之前无法完成表单的提交。但是，当我输入错误的字段值并单击提交时，表单已提交，但输入值未发送到服务器。我想要与 HTML5 必需属性相同的行为。这是我的代码:

<div class="row">
    <label class="col-sm-2 label-on-left">APN</label>
    <div class="col-sm-7">
        <div class="form-group label-floating">
            <label class="control-label"></label>
            <input class="form-control" type="text" name="apn" ng-model="Configure3gCtrl.configure3g.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required/>
        </div>
    </div>
</div>          

Answer 1

正如我在评论中所说的 [未发送值，因为当您使用不正确的模式传递输入时，ng-model 是未定义] .

但是我们可以使用此处的表单验证作为示例，如果我们的 ng-model 无效 表单将被禁用。

var app = angular.module("app", []);

app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {

  $scope.submit = function() {
    console.log($scope.object)
  }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <form name="form">
    <label class="col-sm-2 label-on-left">APN</label>
    <input type="text" name="apn" ng-model="object.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required />
    <button ng-click="submit()" ng-disabled="form.$invalid">submit</button>
  </form>

</div>