AngularJS Web Application Development Blueprints

Building the Add Expense form

Now, let's create our Add Expense form. We will add the following code in the app/partials/add-expense.html file:

<h2>Add Expense</h2>
<form id="addForm" name="addForm" novalidate >
    <label>Category</label>
    <select ng-model="expense.category" ng-options="category for category in categories">
    </select>
    <label>Amount:</label>
    <input type="number" ng-model="expense.amount"></input>
    <label>Description:</label>
    <input type="text" ng-model="expense.description"></input>
    <button ng-click="submit()">Submit</button>
</form>

This is a rather straightforward form. The novalidate tag in HTML5 is used to disable the browser's default validations.

Notice that we are also making use of the built-in directive, ng-options, to dynamically ...