I have a concern with AngularJS's ng-change and ng-blur, so I would like to confirm with an expert what is the right way to use them when we update a form value.

1. I have a dropdown in the below code, and I want to execute overrideBusinessDec() when the user changes the dropdown's value. With the current implementation, because of ng-blur, it's happening when we click away from the form. I can make a quick fix by removing ng-blur from the field, and it will work as expected.
2. Another scenario: When you are in an edit state, it populates values, but does not enable the form if I don't add ng-blur on the field. I don't know how to fix that.

Is there a solution that can take care of both problems?

<!-- main.html -->
<div>
    <select kendo-drop-down-list k-data-value-field="'id'"
        k-data-text-field="'text'" k-option-label="'Select'"
        k-data-source="ctrlEffOptions"
        ng-disabled="!processRating.controlEffectivenessRatingComputeKey"
        ng-model="processRating.controlEffectivenessRatingOverrideKey"
        ng-change="overrideBusinessDec()" id="controlEffBusiness" required ng-model-options="{updateOn: 'blur'}">
    </select>
</div>

I have a concern with AngularJS's ng-change and ng-blur, so I would like to confirm with an expert what is the right way to use them when we update a form value.

1. I have a dropdown in the below code, and I want to execute overrideBusinessDec() when the user changes the dropdown's value. With the current implementation, because of ng-blur, it's happening when we click away from the form. I can make a quick fix by removing ng-blur from the field, and it will work as expected.
2. Another scenario: When you are in an edit state, it populates values, but does not enable the form if I don't add ng-blur on the field. I don't know how to fix that.

Is there a solution that can take care of both problems?

<!-- main.html -->
<div>
    <select kendo-drop-down-list k-data-value-field="'id'"
        k-data-text-field="'text'" k-option-label="'Select'"
        k-data-source="ctrlEffOptions"
        ng-disabled="!processRating.controlEffectivenessRatingComputeKey"
        ng-model="processRating.controlEffectivenessRatingOverrideKey"
        ng-change="overrideBusinessDec()" id="controlEffBusiness" required ng-model-options="{updateOn: 'blur'}">
    </select>
</div>

• javascript
• angularjs

Share Improve this question Follow edited Oct 26, 2015 at 15:18 Kristján 18.9k55 gold badges5454 silver badges6464 bronze badges asked Oct 26, 2015 at 14:53 aftabaftab 69311 gold badge1212 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

ng-change fires when the value of the element changes, so it's a good choice for you dropdown. It it also a good choice for a text field when you want something to happen as you type, like an autoplete. If you want to wait for the user to be finished and leave the text field, use on-blur, which fires when the field loses focus.

on-blur doesn't affect whether your form fields are enabled. You must be doing something else to cause that.