CODEWITHSUNDEEP
javascriptangularjsinternet-explorer
Moussa
Moussa

Reputation: 4154

Angular JS component binding not working for button type on IE11

I have an issue on IE11 with angular JS 1.5.6 component for button. I have a component for button called my-button and button type is passed in a binding named button-type:

<form role="form">
  <my-input label="Firstname" placeholder="Enter first name"></my-input>
  <my-input label="Lastname" placeholder="Enter last name"></my-input>
  <my-button label="Reset" button-type="reset" on-click="$ctrl.performClick(action)"></my-button>
  <my-button label="Submit" button-type="submit" on-click="$ctrl.performClick(action)"></my-button>
</form>

The HTML of my-button component:

<button class="btn btn-default" type="{{$ctrl.buttonType}}" ng-click="$ctrl.click()">{{$ctrl.label}}</button>

I have plunkered my issue: http://plnkr.co/edit/ydthlLjKQQf9s6wdX9Zn?p=preview

The problem is that button type is always set to "submit" on IE11, like you can see in the capture of IE11 DOM:

IE11 DOM

Whereas on Firefox for instance, the button type is correct like you can see in the capture of Firefox DOM:

Firefox DOM

All that results in a functional bug on my angular app with IE, because with IE when a user edit the form and press enter, the reset action is called whereas it should call submit action.

The bug can easily be reproduced: start the plunker on both IE and Firefox, press F12 to display the console, start editing the form and press enter, on IE11 when you press enter the result in the console is "Asked for reset" whereas on Firefox the result is the one expected : "Asked for submit".

Upvotes: 0

Views: 740

Answers (1)

Moussa
Moussa

Reputation: 4154

Like said in angular's IE compatibility doc (https://docs.angularjs.org/guide/ie): "For the type attribute of buttons, use ng-attr-type tags instead of type="{{ someExpression }}". If using the latter, Internet Explorer overwrites the expression with type="submit" before Angular has a chance to interpolate it."

I manage to solve my issue by replacing type="{{$ctrl.buttonType}}" by ng-attr-type="{{$ctrl.buttonType}}"

Upvotes: 2

Related Questions