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

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>

thats how angular works it will not set the value in ng-model unless its valid. you have to check validity of form in the submit function. — Gaurav Srivastava, Jun 20 '17 at 08:06
value not sent because when you pass the input with incorrect pattern the `ng-model` is `undefined` — Maher, Jun 20 '17 at 08:15
With ng-required the submit button does not submit the form until the field is not empty. Could I achieve something similar for ng-pattern not coding it in the controller function? — MABC, Jun 20 '17 at 08:20

score 1 · Accepted Answer · answered Jun 20 '17 at 08:20

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>

score 0 · Answer 2 · answered Jun 20 '17 at 09:41

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.

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

2 Answers2