4

Angular seems to have a different behavior when a user enters and then clears text in an input field depending if this field is required or not.

Take a look at this example. By default the model is user = {"name":"guest","last":"visitor"}. When clearing both fields the model becomes user = {"last":""} whereas I would have expected user = {}.

Why is this the case? And, is there a way to get the same behavior for both fields without making them both (not) required?

Update:

I used a workaround with watch in the end:

$scope.$watch('user',function(newValue) {
  for (var prop in newValue) {
    if (newValue.hasOwnProperty(prop)){
      if (newValue[prop] !== undefined && newValue[prop] == "")
        newValue[prop] = undefined;
    }
  }
}, true);

Most likely the last if-condition could be written more efficiently, but at least it seems to work as expected.

Improve this question
3
  • 1
    Just for the sake that if a field is required in input, its value should not go something like empty or null. Commented Oct 22, 2015 at 5:57
  • 1
    Then how to get the same behavior for the non-required input fields? Commented Oct 22, 2015 at 6:03
  • 2
    you can trigger a function on field emptying which actually deletes the specified field. Commented Oct 22, 2015 at 6:09

3 Answers 3

Reset to default
5

When there's an error in validation, the model is set to undefined hence the disappearing name key (which is validated with required).

It's a known bug in Angular that an empty field with ng-minlength does not get invalidated correctly. If you set the value to a (which is still 2 letters short of minimum 3) you'll notice both keys disappear correctly.

https://github.com/angular/angular.js/issues/7277

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

1 Comment

I have implemented a work-around with a watch function which simply tests if the field is "" and, if so, sets it to undefined. Seems to be working fine.
1

This situation creates because "User Name:" field has required validation ,so when you clear "User Name:" field. "User Name:" field doesn't pass the required validation. As a result, the model becomes user = {"last":""}

On the other hand, "Last name:" has ng-minlength="3" and ng-maxlength="10" validation so, after clear "Last Name:" field when you enter 1 or 2 character on "Last Name:" field. It doesn't pass the minlength validation so, the model becomes user = {}

so if any validation fails like "User Name:" field, it vanish from the model and the model becomes user = {"last":""}

Improve this answer

3 Comments

I think you're missing the point. Chris is rightly expecting that an empty string would still be resulting in user = {}, but it's not, due to a bug in Angular.
No. as i explained, if the field don't pass validation. It vanish from the model.
Except, that as the example indicates, when a minlength input is empty it should not be passing validation, however it does.
0

If the result would be user = {}, then it would mean that Angular would have to actually delete that property entirely, by calling user.delete('last'), which is something it can not do. It does not know anything about person object. It only got reference to the person.last property

Improve this answer

2 Comments

That's actually what Angular does. When a model is invalidated, the model value is set to undefined while the view value retains whatever you're typing.
See the logic here: github.com/angular/angular.js/blob/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.