CODEWITHSUNDEEP
javascriptangularjsvalidation
Tim Withers
Tim Withers

Reputation: 12059

Angular - Workaround for invalid model values

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/

Upvotes: 1

Views: 131

Answers (1)

Patrick
Patrick

Reputation: 6948

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.

Upvotes: 4

Related Questions