Angular JS component binding not working for button type on IE11

Question

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:

Whereas on Firefox for instance, the button type is correct like you can see in the capture of 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".

Moussa · Accepted Answer · 2016-10-05 14:37:08Z

2

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}}"

answered Oct 5, 2016 at 14:37

Moussa

4,1547 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS component binding not working for button type on IE11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related