CODEWITHSUNDEEP
angularinternet-explorerangular-reactive-forms
Present practice
Present practice

Reputation: 601

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

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?

Upvotes: 0

Views: 1541

Answers (3)

Brian C. Peters
Brian C. Peters

Reputation: 18

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

Upvotes: 0

Z. Bagley
Z. Bagley

Reputation: 9260

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.

Upvotes: 1

Amit Chigadani
Amit Chigadani

Reputation: 29715

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>

Upvotes: 0

Related Questions