Why Angular 1 form validation not works without ng-model

Question

I am trying to implement the basic angular form validation. I have implemented the same. But I am curious to know, why it does not works if I am not using ng-model.

Link for plunker to show the same behaviour

Answer 1

ngModel directive holds an instance of NgModelController containing the services for data-binding, validation, CSS updates, and value formatting and parsing. If ngModel itself is not there, validation will not work. For form validation to work you need both form instance which can be published to scope using name attribute and the form input control (ngModel). The below description from Angular documentation explains that:

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

This allows us to extend the above example with these features:

Custom error message displayed after the user interacted with a control (i.e. when $touched is set) Custom error message displayed upon submitting the form ($submitted is set), even if the user didn't interact with a control

Answer 2

Because without the ng-model, the input elements aren't bound to anything within your application's scope.

Answer 3

Angular has own context model. (scope or something else) If you treat form outside Angular world, form can't get any information in Angular point of view.

If you doesn't want to use ng-model, use plain javascript validation method.

Answer 4

ng-model="value" defines that the value of that particular element is from angular's context. It checks for the value in the scope where the element is declared. For example, we have onclick="call()" and ng-click="call()" methods. The onclick event search for the function that is outside of angular context, ng-click event search for the function in the scope.

<div ng-app="app" ng-controller="Ctr" onclick="call()" ng-click="call()"></div>


<script>
    function call(){
      console.log('out of angular');
    }
    angualr.app('app', function($scope){
     $scope.call = function(){console.log('insode angular')}
    })
</script>

In the above code if you remove onclick, then ng-click prints 'inside angular', if you remove ng-click, then onclick prints out of angular. If both will be there, both will be called and prints. In the same way, if you remove ng-model, you will loose the control over the value of input in angular context and $error, $invalid doesn't know what to validate.