Using angularJS click on enter form functionality in Internet Explorer

Question

I have a form in angularJS like this:

<form>
    <div class="row form-group">
      <div class="col-xs-4">
        <label>Product name:</label>
      </div>
      <div class="col-xs-8">
        <input ng-model="vm.name" ng-disabled="vm.product.name">
      </div>
    </div>
    <button ng-hide="1" ng-click="vm.addName()"></button>
  </form>

The idea being that when a user enters a name the form locks it (inside addName()) and does an API call to search for the associated data. In firefox and chrome this works perfectly, but the click event never fires in internet explorer. Is there a workaround for this?

I just need a way to make the click event fire when 'enter' is pressed on an input inside of the form field. Is there a way to make this functionality the default in internet explorer?

Answer 1

The default behavior when pressing enter on an input inside a form is to either submit the form, or click the submit button, depending on the browser. If there is a button with no type and no submit button, that button may be changed to a submit button by the browser.

To get consistent results, change your button to a submit button and move the addName call to the form's submit event.

<form ng-submit="vm.addName()">
  <div class="row form-group">
    <div class="col-xs-4">
      <label>Product name:</label>
    </div>
    <div class="col-xs-8">
      <input ng-model="vm.name" ng-disabled="vm.product.name">
    </div>
  </div>
  <button ng-hide="1" type="submit"></button>
</form>