Here is the current html for the form:
<form novalidate class="form-inline"> <div class="form-group"> <input type="text" class="form-control" ng-model="name" focus-element /> </div> <input class="btn btn-default" type="submit" ng-click="add(name)" value="Add" /> </form>
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.
<input type="text" class="form-control" name="name" ng-model="name" required focus-element />
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" type="submit" ng-click="add(name)" value="Add" ng-disabled="itemForm.$invalid" />
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.