AngularJS 在表单中使用 ng-pattern 不会向服务器发送无效字段

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

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

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

AngularJS 在表单中使用 ng-pattern 不会向服务器发送无效字段

AngularJS with ng-pattern in form does not send invalid field to server

javascript

forms

angularjs

angularjs-ng-pattern