Input won't clear after form submission in AngularJS using Ionic framework

Question

I have this weird problem. When I clear the model in the controller, the input field binded to the model with ng-model wont clear when the form is submitted.

Controller

angular.module('starter.controllers', [])
.controller('DashCtrl', ["$scope", function($scope) {
    $scope.clearInput = function() {
      console.log("I get there...");
      //Here's the issue!!! It's not working as expected!
      $scope.message = "";
    };
}]);

Template

<ion-view title="Dashboard">
    <ion-content class="padding">
        <form name="myform" ng-submit="clearInput()">
            <label class="item item-input">
                <input type="text" ng-model="message"/>
            </label>
            <button type="submit" class="button button-positive" >
                button-positive
            </button>
        </form>
    </ion-content>
</ion-view>

I get the console output "I get there", so the function gets activated. What am I missing here?

Community · Accepted Answer · 2017-05-23 12:22:49Z

1

clearInput() and ng-model refer to different scopes after the value of input has changed. Please see this SO answer for deeper explanation.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Nov 20, 2014 at 10:07

Kate Miháliková

2,03516 silver badges22 bronze badges

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

1 Comment

Felix D. Over a year ago

Thanks! So simple yet so frustrating!

Collectives™ on Stack Overflow

Input won't clear after form submission in AngularJS using Ionic framework

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related