Angular Model updates even when value is invalid

Question

I am new to angular and when trying out form validations I came across following scenario :

Setup : I have one "required" field in my form which is bound to an ng-model and have a default value in it, and a reset button. I'm printing its value in a para tag.

Questions

Now when I remove the value from the field, my para tag is getting updated to null (no value) even when this value is invalid. So my question here is, why is my model value updated even when the new value is invalid.
Also, when i click on reset, the field is reset but the form's valid state is still true and the model is not updated as well. Why is that ?

Here is the code : http://plnkr.co/edit/fqczGwbponOW0kgs23Jn?p=preview

    <form name="testForm">
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" />
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>
    <p>Hello {{yourName}}!</p>

@SSH but why is that required? Angular binds the model to the view so any update in view should automatically update the model. — Himanshu Tyagi, Jun 13 '16 at 07:35

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

This is because reset is out of the scope of Angular JS. AngularJS model does not know that an input value has been updated using reset unless you explicitly tell it.

You can check my answer to this question for further reference: Angular model doesn't update when changing input programmatically

Also you can fix your code as:

    <form name="testForm">
      <label>Name:</label>
      {{yourName}}
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" ng-click="yourName = ''"/>
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>

edited May 23 '17 at 12:24

Community

1
1

answered Jun 13 '16 at 07:41

Rahul Arora

4,503
1
16
24

And what about Question 1? – Himanshu Tyagi Jun 13 '16 at 08:27
I did not get your first question. Where is your paragraph tag getting null value? – Rahul Arora Jun 13 '16 at 08:51
I mean, AFAIK, model in angular is only updated when the new value is valid, here textbox is required field, so a blank value is *invalid* so the model should not be updated to **blank** when you remove text from the textbox (by using backspace or del). – Himanshu Tyagi Jun 13 '16 at 08:54
2

"model in angular is only updated when the new value is valid": I think you are confusing two different concepts here. AngularJS does not restrict the entry of an invalid model value based on HTML form validation. – Rahul Arora Jun 13 '16 at 09:12
i agree with @rahul , the model is updated in any change valid or not. required made only and only the form.$valid = false. what did you want to do ? maybe we can find solution with a $watch – AlainIb Jun 13 '16 at 09:26
Thanks for the clarification @RahulArora – Himanshu Tyagi Jun 15 '16 at 05:23

score 1 · Answer 2 · answered Jun 13 '16 at 07:49

1

I will create a function in the controller who clear the data : a plunker http://plnkr.co/edit/YfCrTJNpYGOuNd7GgAgT?p=preview

controller :

var app = angular.module('app', []);  
app.controller('MainCtrl', function($scope) {

  $scope.yourName = 'Sam' ;
  $scope.delete = function(){  
   $scope.yourName = null ;
 }
});

html

<body ng-controller="MainCtrl">
  <div>
    <form name="testForm">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here" required>
      <button ng-click="delete()">delete</button>
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>
    <p>Hello {{yourName}}!</p>
  </div>
</body>

answered Jun 13 '16 at 07:49

AlainIb

4,544
4
38
64

And what about Question 1? – Himanshu Tyagi Jun 13 '16 at 08:26
the "required" option invalid only the form when the field is empty, it don't mean that the input is prevented to be null by any action. It don't block you when you set it to null. you can for example block the submit button with `` – AlainIb Jun 13 '16 at 08:38

score 0 · Answer 3 · answered Jun 13 '16 at 09:13

This is because of different scopes. When you are resetting the form using the above method, scope is not affected at all. So even if you run digest cycle again by using $scope.$apply(), it wont work, because the scope is not at all affected by the way you are resetting the form data.

Angular Model updates even when value is invalid

3 Answers3