0

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

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

2 回答 2

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>

于 2017-06-20T08:20:48.020 回答
0

理想情况下，您不应该将无效值发送到服务器，因此您应该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，因为它是无效的。

于 2017-06-20T09:41:17.780 回答