Inside of Todo App there is an input field for adding new Todo items to the
the input and if I accidently try and submit an empty Todo I will get a 400
error from the server, but the user will not be notified. This post will walk you
through the steps to take to add some validation to your form with Angular.
Here is the current html for the form:
<form novalidate class="form-inline">
<input class="btn btn-default" type="submit" ng-click="add(name)" value="Add" />
There are several things that need to be addressed for validation to work. The
first thing we need to do is name our form.
<form name="itemForm" class="form-inline" novalidate>
We named the form
itemForm and notice that even though we are adding
validation to the form it still has the
novalidate attribute (kinda confusing
novalidate means that we are turning off the built in html5
validation which produces these weird popups that I don't think look all that
The next thing that we need to do is name our input field and add the
required attribute. We are naming the input field so that the required
attribute will work.
*Even though it takes up more lines I like to line up my attributes vertically
rather than having them all bunched up on one line. I just feel like they are
harder to read and harder to catch errors if they aren't lined up vertically.*
Now let's take a look at the submit button. The problem that we are trying to
solve right now is that the user is allowed to submit an empty todo item. To
keep this from happening we are going to disable the submit button if the input
is empty. To conditionally disable the submit button we will add the
ng-disabled attribute to the submit button.
<input class="btn btn-default"
Notice that inside of the
ng-disabled attribute we are referencing the name of
itemForm and seeing if it is invalid (this is why we needed to name
And that is actually all that we need to do to make sure the user can't submit
an empty Todo item. There are many other things that we should validate, like
the length of the input, but we will tackle those later.