Why does setting ng-model to undefined not make the form/input valid again?

by

Whenever you use ng-model on an input or select tag, angular internally manages two values for the field, one is $viewValue and other is $modelValue

$viewValue -> Used for display purpose on view

$modelValue-> Actual value which is used inside scope.

When using an input tag with type="email" Angular constantly validates the input value.

And if the value does not validate as a correct email, angular internally will set $modelValue to undefined and will set the form.fieldName.$error.fieldName attribute to true. So that field becomes invalid.

If you check the value of form.fieldName.$modelValue inside the controller you will find it as undefined.

So setting the model to ‘undefined’ in the controller, when the field is already invalid, changes nothing.

But if you set it to null or "" it will work as $modelValue and $viewValue both get changed – making the field valid again.

Hope this has cleared your understanding. Thanks.

More Related Contents:

  1. Angular form validation ng-disabled not working
  2. My form’s validate() is not working
  3. HTML5 form required attribute. Set custom validation message?
  4. How can I listen to the form submit event in javascript?
  5. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  6. AngularJS does not send hidden field value
  7. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  8. How to Call a JS function using OnClick event [duplicate]
  9. What’s the difference/incompatibility between ng-model and ng-value?
  10. Enable/Disable submit button if checkbox is checked/unchecked?
  11. show validation error messages on submit in angularjs
  12. Best JavaScript solution for client-side form validation and interaction? [closed]
  13. HTML/JavaScript: Simple form validation on submit
  14. Recommendation for javascript form validation library [closed]
  15. AngularJS: How do I manually set input to $valid in controller?
  16. How to show setCustomValidity message/tooltip without submit event
  17. Required attribute Not working with File input in Angular Js
  18. How do I add validation to the form in my React component?
  19. Angularjs how to upload multipart form data and a file?
  20. How to set custom validation messages for HTML forms?
  21. Trigger standard HTML validation (form) without using submit button? [duplicate]
  22. Angularjs – simple form submit
  23. angularjs form reset error
  24. Form Validation With Bootstrap (jQuery)
  25. How can I void a form action and execute jQuery when all HTML form elements are validated?
  26. How to programmatically calculate the contrast ratio between two colors?
  27. Angular-animate – Unknown provider: $$asyncCallbackProvider
  28. AngularJS ng-click fires twice
  29. Custom Checkbox
  30. Form submitted using submit() from a link cannot be caught by onsubmit handler

Leave a Comment