0

What I need: I need to add extra validation to input by adding attribute to this input.

Firstly, my plnkr example is here

What I'd tried?: I added directive, so when I add attribute to the input, the value of the input is being validated by regexp ^5$. Also, I added required to the input. I am talking about 2nd input now (name of the input is input2).

So, I'd added attributes "my-attribute" and "required". When there is nothing in input I expect two items in myForm.item[1].$error: its ok – there are properties myAttribute and required. Now, I will add some to the input2, for example "abc", now I expect in myForm.item[1].$error only myAttribute property (because required validation is passed, but myAttribute validation is not), but there is properties myAttribute and parse in myForm.item[1].$error. What is parse property? Why it is adding to $error?

I should notice, that when I put 5 to the input2 myForm.item[1].$error is empty, because both require and myAttribute validations passed (and this behaviour is expected).

Now, when I clear input2 there are properties parse and myAttribute again. Why? When field input2 is empty, I expect required and myAttribute in myForm.item[1].$error, but there are no ones.

So, why I get strange property parse in $error and how I can make my example working?

Form example code was founded here and approach to validate input by directive was founded in answer to this post.

Community
  • 1
  • 1
Sharikov Vladislav
  • 7,049
  • 9
  • 50
  • 87

1 Answers1

2

What is parse property? Why it is adding to $error?

The parse property is automatically added by Angular when one of the parsers returns undefined. From Angular documentation:

Returning undefined from a parser means a parse error occurred. No $validators will run and the 'ngModel' will not be updated until the parse error is resolved. The parse error is stored in 'ngModel.$error.parse'.

Not sure if I'm missing some use case here but changing the return clause from the parser should be enough:

//For DOM -> model validation
ngModel.$parsers.unshift(function(value) {
  var valid = new RegExp("^5$").test(value);
  ngModel.$setValidity('myAttribute', valid);
  return value;
});
bmleite
  • 26,850
  • 4
  • 71
  • 46
  • Ok about parse. But, there is required attribute and I need to work with required first. When the form is blank there must be two properties in error: required and myAttribute, right? Why not? Both validations are not passing. Ok about parse, ok about myAttribute but what about required? – Sharikov Vladislav Oct 27 '14 at 19:48
  • *"When the form is blank there must be two properties in error: required and myAttribute, right?"* Yes, that's what I'm getting. Aren't you seeing the same? Isn't that the expected behaviour? – bmleite Oct 27 '14 at 20:11
  • No, when form is blank (not first load, but after inputing some stuff and clearing input) I don't see same – Sharikov Vladislav Oct 27 '14 at 21:11
  • Please test with this [plunkr](http://plnkr.co/edit/USi3E200cUVXJfMcBU0F?p=preview). I'm not able to replicate that behaviour. When I insert and then clean one of the inputs the `require` attribute appears on the `$error` list. – bmleite Oct 28 '14 at 09:23