Within my Ionic app, there is a form that contains an input field and a button. Upon clicking the button, an action should occur within the controller to clear the input field. Unfortunately, this functionality is not working as expected. Despite its simplicity, I am unable to identify what is causing the issue. Any suggestions or advice would be greatly appreciated.
I have already explored similar queries on Stack Overflow, Stack Overflow, and Stack Overflow, but none of the solutions provided have resolved the problem.
The HTML structure is as follows:
<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 JavaScript function involved is as follows:
$scope.addCategory = function (newCategory) {
$scope.ExistingCategoriesArray.push(newCategory);
$scope.addNewCategory = "";
}
EDIT:
No visible errors are displayed and no actions are triggered upon button click..