Difference between ng-model=“xxx” and value=“{{xxx}}”?

Question

In a regular form, when a reset type button ( <button type="reset">Reset</button> ) is clicked, all input controls will be emptied except readonly or disabled .

http://jsfiddle.net/blaise_liu/K2f7g/

When constructing a form using angular , I have

<input type="text" id="district" disabled="" ng-model="address.district" />

In this form, when the reset button is clicked, the value in the input above is removed even it is marked as disabled or readonly . Why? Should I use ng-model to bind to this input control? Do I have to use value= to make the binding?

<input type="text" id="district" disabled="" value="{{address.district}}" />

Answer 1

ng-model supports 2-way data binding. When you use ng-model the value of the model is bound to the view and updating the model will update the view and vice-versa updating the view updates the model. Using {{address.district}} does not 2-way data bind. It only outputs the value of the model. See: https://docs.angularjs.org/guide/forms .

The button type reset is resetting the model regardless of the disabled property. If you don't want 2-way data binding you can just use {{address.district}} as you have mentioned. See: http://jsfiddle.net/K2f7g/1/ .

Answer 2

ng-model adds parsing and validation. Just interpolating the value isn't sufficient for that.

In your fiddle, you denote a field as required . required is also another directive that works with ngModelController .