How to imitate keypress event for angularJS input?

Question

SOLVED: Update Angular model after setting input value with jQuery

Here's code with <input> element. It runs with AngularJS. I need to imitate keypress for it. If I use $().val() or autotype library, which imitates keypress events, AngularJS script don't handle it. I can't press "Create group" button. But If I type manually, button works.

<div class="md_simple_modal_body">    
    <form class="modal_simple_form ng-pristine ng-valid" ng-submit="updateGroup()">   
      <h4 my-i18n="group_create_modal_title">Create group</h4>    
      <div class="md-input-group md-input-animated" my-labeled-input="">
        <label class="md-input-label" my-i18n="group_create_name">Group name</label>
        <input class="md-input ng-pristine ng-valid ng-empty ng-touched" type="text" ng-model="group.name" my-focused="">
      </div>    
    </form>    
  </div>    
  <div class="md_simple_modal_footer">
    <button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel">Cancel</button>
    <button class="btn btn-md btn-md-primary" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating">Create group</button>
  </div>    
</div>

Function in controller:

$scope.createGroup = function () {
  if (!$scope.group.name) {
    return
  }
  $scope.group.creating = true
  var inputUsers = []
  angular.forEach($scope.userIDs, function (userID) {
    inputUsers.push(AppUsersManager.getUserInput(userID))
  })
  return MtpApiManager.invokeApi('messages.createChat', {
    title: $scope.group.name,
    users: inputUsers
  }).then(function (updates) {
    ApiUpdatesManager.processUpdateMessage(updates)

    if (updates.updates && updates.updates.length) {
      for (var i = 0, len = updates.updates.length, update; i < len; i++) {
        update = updates.updates[i]
        if (update._ == 'updateNewMessage') {
          $rootScope.$broadcast('history_focus', {peerString: AppChatsManager.getChatString(update.message.to_id.chat_id)
          })
          break
        }
      }
      $modalInstance.close()
    }
  })['finally'](function () {
    delete $scope.group.creating
  })
}

I tried:

$("form[ng-submit='updateGroup()']").find("input[ng-model='group.name']").val("12223");

And

$("form[ng-submit='updateGroup()']").find("input[ng-model='group.name']").autotype("12223"); // With library. Link poster earlier.

One more person to use both Angular and jQuery together (sigh). People, please _stop_ using these two at the same time. So many problems, like this one, come directly from the fact that you are trying to make two very different things work together. Remove jQuery, or remove Angular, and you'll see, many problems will go away. — Jeremy Thille, Sep 05 '17 at 14:57
So you guys load two very different libraries and try to mix them up, leading to this kind of problem and adding complexity, and apparently there is no way to do otherwise and write a clean app? That's unfortunate :/ Good luck then, I guess — Jeremy Thille, Sep 05 '17 at 15:05
Angular uses Jquery internally. One should try not to make use of JQuery within an Angular app, but the idea that they should be entirely mutually exclusive things is a misnomer. — Mike Feltman, Sep 05 '17 at 15:08
SOLVED with this answer: https://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery — Denis, Sep 05 '17 at 15:25

score 0 · Accepted Answer · answered Nov 12 '17 at 12:41

0

Found answer in another question:
Update Angular model after setting input value with jQuery
Just need to use $(element).trigger('input'); after changing input value with jQuery.

answered Nov 12 '17 at 12:41

Denis

101
1
9

How to imitate keypress event for angularJS input?

1 Answers1