Coding, Project Development

Improving Text Input Fields in Ionic and AngularJS

Today I’m going to go over how to customize and improve the text input field that comes with the Ionic framework. Specifically, I will go over...

  • How to access the input value from the controller
  • How to clear the input field once the user submits the value
  • How to disable the submit button until text is added

I am writing this tutorial because Ionic does not have form documentation beyond HTML markup (probably because forms are fairly standard in AngularJS, which is the framework Ionic is built on). While the methods I describe are not overly complicated or tricky, it did take me a few hours to get all of these features to play nicely together.

Ionic supports seven out-of-the-box text inputs. The seven options are shown below, with HTML code on Ionic’s site.

Ionic's seven out-of-the-box text inputs.

Since I am designing for mobile, I wanted to maximize space and insert a small inline button next to the input field. It is surprisingly difficult to add a custom inline button in most of these versions, so for the sake of convenience, I decided to go with the already made inset input option.

At this point, I had a text input that looked good, but was nonfunctional. Ionic’s documentation stops at this point, without telling you how to access the data sent through that form.

Accessing the Data from an Input Field

In order to make sure you are accessing the input data, you need to bind the input field to a model attribute. You can do this by adding the Angular directive ng-model in the input field. Setting ng-model equal to a variable (in my case, ”customQuote”) will bind that property to the the input.

<input type="text" placeholder="Your own content" ng-model="customQuote">

I wanted to call a function once the user hits submit. To do that, I added a form element between the first two div elements. In that form element, I used the Angular directive ng-submit, which works by binding Angular expressions to JavaScript onsubmit events. That directive then passes the input data to a function called “addListItem.” (In my CodePen example, I add the quote to a list array so it appears in the view.)

<form ng-submit="addListItem(customQuote)" name="customQuoteForm">

Now that property will be available in your controller as a property of the $scope object.

Clearing the Input Field

The first of the two additional features I included was to clear the text field after the user hits submit. By default, Ionic requires the user to delete pre-existing text themselves. This is a pretty quick fix if you understand scopes in Angular: When a function defined on a $scope object is called, the keyword “this” refers to the scope in effect when the function was called. Since our “customQuote” property that we defined earlier is in the scope, we can clear it simply by setting that property equal to null.

  $scope.addListItem = function(quote){
    $scope.array.unshift(quote);
    //clear quote
    this.customQuote = null;
  };

Disabling the Submit Button

The final thing I wanted was a way to disable the submit button until text had actually been entered in. Right now, when the user hits submit, the form submits anyway and creates a list of blank list items. That’s not what we want.

First, add the HTML5 “required” attribute right before the end of the input tag. This means that the form will not submit until the user enters an input.

<input type="text" placeholder="Your own content" ng-model="customQuote" required> 

The submit button, however, is still enabled, meaning the user is still allowed to submit.  

I added the ng-disabled directive to the button element, which will kick in when the $invalid property of “customQuoteForm” is true. In other words, the button will only be active when the input to “customQuoteForm” is valid.  When the user hasn’t entered a value in an input marked as required, the form is invalid and the disabled directive kicks in. When text is entered, the form is valid and the button is active.

<button class="button button-small" ng-disabled="customQuoteForm.$invalid">

Both the required attribute and the ng-disabled directive are necessary in order to make this work. Note that this entire interaction is handled on the DOM side—no controller interactions are needed.

***

That’s it! I hope this was helpful. The full CodePen example is shown below. Feel free to play around with it to suit your needs.

See the Pen JdqBvp by Sanette Tanaka (@ssktanaka) on CodePen.