Angular2 [disabled]="function()" doesn't work in IE

Question

In Angular2 app the submit button is enabled only if several conditions are met. I use [disabled]="disabled(j)" for that.

html:

<button type="submit" class="submit" [disabled]="disabled(j)">Submit</button>

component:

disabled(j) {
   if (this.form.valid && j === this.userId) {
    return false;
   } else {
    return true;
   }     
}

It works perfectly in Chrome, but doesn't work in IE. Inspecting DOM element has shown, that instead of [disabled]="disabled(j)" it has [disabled]=""

How to fix that?

score 1 · Answer 1 · answered Jul 31 '18 at 17:47

1

Most likely problem is with polyfills for form validation (which uses HTML5 and ES6 standards), and not actually the function inside an input directive. More specific, this item is the likely culprit: this.form.valid

Check out how to add polyfills, and which extra packages will be needed: https://angular.io/guide/browser-support

Note: IE is considered a deprecated browser in most applications, and full support should be avoided as a requirement (especially for versions < 10). For 10/11 the ES6 polyfills are still required.

answered Jul 31 '18 at 17:47

Z. Bagley

8,942
1
40
52

I'm concerned that IE didn't bind a function to disabled property - `[disabled]=""` so it's not hitting this.form.valid check. – Present practice Jul 31 '18 at 17:58
@AnnaOlshevskaia - You can check that with a `console.log` statement at the start of the `disabled(j)` method. – ConnorsFan Jul 31 '18 at 18:03

score 0 · Answer 2 · answered Jul 31 '18 at 17:40

0

As a work around, you can simply add the condition directly to [disabled] attribute

<button type="submit" class="submit" [disabled]="!(form.valid && j === userId)">Submit</button>

answered Jul 31 '18 at 17:40

Amit Chigadani

28,482
13
80
98

score 0 · Answer 3 · answered Jul 31 '18 at 17:48

0

This may have to do with polyfills, since you are using IE you may have to manually update them. See here: Angular 2 / 4 / 5 not working in IE11

answered Jul 31 '18 at 17:48

Brian C. Peters

18
1
6

Angular2 [disabled]="function()" doesn't work in IE

3 Answers3