CODEWITHSUNDEEP
angularjsinternet-explorerinternet-explorer-11
Levi Morris
Levi Morris

Reputation: 123

Angular and Internet Explorer 11 - Inputs Not Working Correctly

I'm having severe issues with inputs using ng-model in IE (11 and all previous versions,) but everything is working correctly in all other browsers. This issue was first observed last week. We have made no updates to this section of our application and heard no reports of users having this issue prior to last week.

We are running Angular 1.4.3.

Basically, inputs like this one:

<input data-ng-model="answer.value"></input>

Are not correctly updating the model. It looks like an issue with onChange or onFocus events - the inputs never lose their ng-pristine and ng-untouched classes. They are properly displaying the initial value from the model but any updates made by the user simply fail to save. We've experimented with adding a <meta http-equiv="X-UA-Compatible" content="IE=11" /> tag to our head to no avail. Removing all validations from the inputs makes no difference. There are no console errors or alerts.

Upvotes: 9

Views: 4775

Answers (2)

Nate Anderson
Nate Anderson

Reputation: 21226

In my case, I had a parent component, and a child input.

The parent component had a poor choice of Angular binding attribute; I called the attribute "disabled". disabled was a bad choice of custom attribute name because that is a standard attribute for many HTML elements.

When I changed the custom attribute name to "custom-disabled", the child inputs started responding.

Internet Explorer interpreted some ancestor disabled attribute to mean all descendants should be disabled; therefore my angular input ng-model, ng-change, ng-blur, ng-focus were not working.

I should've known: when I asked $('input').is(':disabled'), the result was true. I ignored this because the input element itself didn't have the disabled attribute; only an ancestor element did!

Upvotes: 3

Michał Ignaszewski
Michał Ignaszewski

Reputation: 1134

I had simillar problem and solution seems to be easy. If you have code similar like this:

<form name="myForm">
    <table ng-disabled="formToggle">
        ...
        <input ng-model="form.name" />
        ...
    </table>
</form>

IE10, IE11 won't check fields and won't set their pristine dirty values on form (other browsers works ok). Just remove ng-disabled (from table in this case and in other case from parent element) and it will work.

Upvotes: 1

Related Questions