带有ng-pattern形式的AngularJS不会将无效字段发送到服务器

Question

I want to validate a text input in form, so the submit of the form could not be done until the input match a regular expression. But when I type a wrong field value and I clik submit the form is submitted but the input value is not sent to the server. I want the same behaviour as with HTML5 required Attribute. This is my code:

<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

As i said in the comment [value not sent because when you pass the input with incorrect pattern the ng-model is undefined ].

But we can use the form validation here as sample if our ng-model are invalid the form will disabled.

 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

Ideally, you should not send the invalid value to server, So you should disable\\hide your submit button, but if you really require sending the invalid value as well to server, then from angularjs 1.3+ you have ng-model-options ( Read Doc ) directive which can help you.

Simply mark your text type input as ng-model-options="{allowInvalid: true }" , It will persist the invalid values as well.

See Demo:

 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> 

also, Test with removing ng-model-options="{allowInvalid: '$inherit' }" from above code snippet then ng-model will be undefined , because it is invalid.