current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have run across a weird/confusing behavior with <input> and form validation.

Essentially, if input has an invalid numeric value (which sets form.$valid to false), if a model value is changed to null, it sets the $valid flag back to true, but doesn't change the value displayed in the input field.

I have created a plunker to illustrate. Follow these steps to reproduce:

  1. Modify value of a cell to empty.
  2. Click on save link (which saves null into model)
  3. Input a non-numeric character.
  4. Click on reset link (which restores null from model)
  5. Observe that the input field is no longer invalid, but the invalid character is still there.

Is this a bug or am I doing something wrong?

EDIT:

I'm starting to believe that it is a bug. I "fixed" it by introducing another directive that forces "" value for null. Here's a fork of the plunker above with the "fix".

EDIT2:

This was fixed in v1.3+

share|improve this question

2 Answers 2

up vote 0 down vote

You code is working fine but you forgot to add a validation check at app.js

 this.save = function(){
      if($scope.mainForm.$valid && !this.get() == ""){
          old_num = num;
      }
 };

You should only save the value when the form is valid.

However that is not a full prove solution as the entire form has to be valid in order for save to work. To further improve the algorithm, i suggest that you mark the validity of individual model and you check validity to the individual model.

Hope it helps

share|improve this answer
    
Thanks for the reply, but that doesn't help me. The issue happens what I save a valid (e.g. empty/null) value, but can't restore it. So, using your suggestion doesn't fix the bug I described. –  New Dev Oct 14 '14 at 3:35
    
Again, my issue is with a very specific form validation behavior. It has little bearing on how/when I save the form. –  New Dev Oct 14 '14 at 3:39
    
You can't check for empty values first? Check for my modification. I have added a check to see if the value is empty or not. I tested and it works in my side. All the best –  madi Oct 14 '14 at 3:41
1  
I don't have a problem with saving - I have a problem with resetting. I don't understand what your fix is fixing. Have you followed the repro steps in the question? –  New Dev Oct 14 '14 at 3:49
1  
it's not an error - it's a log message that I put there to see what's going on. When a value is invalid, ngModel directive sets the model to undefined. The problem is when I'm trying to set the model back to null - invalid flag is reset, but the invalid value stays in the input field. –  New Dev Oct 14 '14 at 4:07
up vote 0 down vote

Had a similar problem, I solved it by first doing:

form.$rollbackViewValue() or form.field.$rollbackViewValue if it was .$invalid before doing any of my other reset code.

In your example, you could change to something like:

<button class="btn btn-link" ng-click="cellForm.$rollbackViewValue(); item[prop].reset()">reset</button>

share|improve this answer
    
This was, in fact, a bug - it was fixed in v1.3+ –  New Dev Apr 15 at 1:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.