表单中带有 ng-pattern 的 AngularJS 不会将无效字段发送到服务器答案

【问题标题】：AngularJS with ng-pattern in form does not send invalid field to server表单中带有 ng-pattern 的 AngularJS 不会将无效字段发送到服务器
【发布时间】：2017-06-20 08:02:53
【问题描述】：

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

<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>

【问题讨论】：

这就是角度的工作原理，除非它有效，否则它不会在 ng-model 中设置值。您必须在提交功能中检查表单的有效性。
值未发送，因为当您以不正确的模式传递输入时，ng-model 是 undefined
使用 ng-required 时，提交按钮在字段不为空之前不会提交表单。我可以为 ng-pattern 实现类似的东西而不是在控制器函数中编码吗？

标签： javascript angularjs forms angularjs-ng-pattern

【解决方案1】：

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

但是如果我们的ng-model 是invalid，我们可以使用这里的表单验证作为示例，表单将被禁用。

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>

【讨论】：

【解决方案2】：

理想情况下，您不应该将无效值发送到服务器，因此您应该disable\hide您的提交按钮，但如果您确实需要将无效值也发送到服务器，那么从 angularjs 1.3+ 你有 ng-model-options (Read Doc) 指令可以帮助你。

只需将text type 输入标记为ng-model-options="{allowInvalid: true }"，它也会保留无效值。

查看演示：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function MyCtrl($scope) {
  $scope.submitt = function() {
    alert($scope.Configure3gCtrl.configure3g.apn);
  }
  $scope.Configure3gCtrl = {
    configure3g: {
      apn: ""
    }
  }
});

<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="frm" ng-submit="submitt()" 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-model-options="{allowInvalid: true }" 
        ng-pattern="/^[a-zA-Z0-9-.]*$/" required/>
      </div>
    </div>
    <input type="submit" value="submit" type="submit" />
  </form>
</div>

另外，从上面的代码 sn-p 中删除 ng-model-options="{allowInvalid: '$inherit' }" 进行测试，然后 ng-model 将是 undefined，因为它是无效的。

【讨论】：