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

1 Answer 1

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.