Angular - Workaround for invalid model values

Question

I am kind of referencing https://github.com/angular/angular.js/issues/1412

Basically I have an input with ng-maxlength="10" and ng-model="form.name"

The user can type the text into the input box, and once the reach the limit, an error is displayed and they can't submit the form. This works flawlessly.

Problem: If they click a button to populate the form with internal data it throws an error.

Example:

<button ng-click="form.name='12345678901'">Populate Invalid Data</button>

Fiddle - http://jsfiddle.net/kCzjC/1/

Patrick · Accepted Answer · 2014-03-25 19:19:07Z

4

Use $setViewValue on the form element (http://jsfiddle.net/kCzjC/5/):

<button ng-click="myForm.formName.$setViewValue('12345678901'); myForm.formName.$render();">Populate Invalid Data</button>

AngularJS formatters (the functions used in the pipeline to populate view value based on model updates) for most angular validations (e.g. maxlength) do not update the view value if the model value is found to be invalid. Calling $setViewValue and $render functions from the ngModelCtrl will populate the input box. The ngModelCtrl is accessible through ngForm.inputName where ngForm is the name of the form and inputName is the name given to the ng-model within the form.

answered Mar 25, 2014 at 19:19

Patrick

6,9783 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Withers Over a year ago

Thanks! That got me pointed in the right direction. From the controller it is $scope.myForm.formName.$setViewValue('12345678901'); in case anyone else is looking for a way to call the form from the controller.

Collectives™ on Stack Overflow

Angular - Workaround for invalid model values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related