Ionic+Angular : Unable to clear input field

Question

In my Ionic app I have a form with an input field inside a form, and a button. Upon button click some action should happen inside the controller and the input field should clear, but it does not happen. This seems like something really easy but I cant understand what it wrong. Please advise. I read here, here and here, nothing helps. The html:

<form novalidate name="customCategoriesForm">
  <ion-list>
    <ion-item>
      <div class="item item-input item-stacked-label noBorder">
      <span class="input-label">Create a new category</span>
      <div class="catRow">
        <input type="text"
              id="newCategoryInput"
              name="addNewCategory" 
              placeholder="Category name" 
              ng-model="addNewCategory"
              ng-minlength="3"
              required
              >
            <button ng-click="addCategory(addNewCategory)"
                    ng-disabled="!customCategoriesForm.addNewCategory.$valid" 
                    class="button button-small button-outline button-positive catButton">Add</button>
      </div>
    </div>
    </ion-item>
    <ion-item>
       ...
    </ion-item>
  </ion-list>
</form>

The JS:

$scope.addCategory = function (newCategory) {
  $scope.ExistingCategoriesArray.push(newCategory);
  $scope.addNewCategory = "";
}

EDIT:

No error appears, nothing happens..

Some error output?

Bruno Peres
– Bruno Peres

2017-05-30 21:58:24 +00:00
Commented May 30, 2017 at 21:58 — Bruno Peres
– Bruno Peres, Commented May 30, 2017 at 21:58
No, nothing happens.

Alex
– Alex

2017-05-30 21:58:42 +00:00
Commented May 30, 2017 at 21:58 — Alex
– Alex, Commented May 30, 2017 at 21:58
Category is not added too?

Bruno Peres
– Bruno Peres

2017-05-30 21:59:21 +00:00
Commented May 30, 2017 at 21:59 — Bruno Peres
– Bruno Peres, Commented May 30, 2017 at 21:59
A new category is being added.

Alex
– Alex

2017-05-30 22:00:55 +00:00
Commented May 30, 2017 at 22:00 — Alex
– Alex, Commented May 30, 2017 at 22:00

Bruno Peres · Accepted Answer · 2017-05-30 22:05:57Z

1

To solve your problem change $scope.addNewCategory to $scope.addNewCategory.value, like this:

The .js:

$scope.addNewCategory = {value : ""}; // initialize a object addNewCategort with the property value = ''

$scope.addCategory = function (newCategory) {
  $scope.ExistingCategoriesArray.push(newCategory);
  $scope.addNewCategory.value = ""; // clear the property value of addNewCategory
}

The html:

<form novalidate name="customCategoriesForm">
  <ion-list>
    <ion-item>
      <div class="item item-input item-stacked-label noBorder">
      <span class="input-label">Create a new category</span>
      <div class="catRow">
        <input type="text"
              id="newCategoryInput"
              name="addNewCategory.value" <!-- Edit this line -->
              placeholder="Category name" 
              ng-model="addNewCategory"
              ng-minlength="3"
              required
              >
            <button ng-click="addCategory(addNewCategory.value)" <!-- and this line -->
                    ng-disabled="!customCategoriesForm.addNewCategory.$valid" 
                    class="button button-small button-outline button-positive catButton">Add</button>
      </div>
    </div>
    </ion-item>
    <ion-item>
       ...
    </ion-item>
  </ion-list>
</form>

You always need to use a dot in ngModel. Read this reference.

answered May 30, 2017 at 22:05

Bruno Peres

16.5k6 gold badges57 silver badges92 bronze badges

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

2 Comments

Alex Over a year ago

It works! Can you please elaborate in a few words? I've never seen this kind of use of ng-model before.

Bruno Peres Over a year ago

Basically you should never use a primitive type in two-way binding. Always use a object. From this answer: If you two-way bind to a primitive (such as a Boolean in your case), the setter will set it on the current scope rather than the scope on which it is defined, which can cause a headache when you have a large user-interface with a lot of child scopes. Another excellent explanation can be found in this video.

Collectives™ on Stack Overflow

Ionic+Angular : Unable to clear input field

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related