Book Image

AngularJS Web application development Cookbook

By : Matthew Frisbie
Book Image

AngularJS Web application development Cookbook

By: Matthew Frisbie

Overview of this book

Packed with easy-to-follow recipes, this practical guide will show you how to unleash the full might of the AngularJS framework. Skip straight to practical solutions and quick, functional answers to your problems without hand-holding or slogging through the basics. Avoid antipatterns and pitfalls, and squeeze the maximum amount out of the most powerful parts of the framework, from creating promise-driven applications to building an extensible event bus. Throughout, take advantage of a clear problem-solving approach that offers code samples and explanations of components you should be using in your production applications.
Table of Contents (17 chapters)
AngularJS Web Application Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Incorporating $touched and $submitted states


Part of what makes form implementation so difficult to get exactly right is that they are highly stateful. DOM events, page history, user state, and countless other factors can all play a role in deciding what should be displayed to the user.

How to do it…

AngularJS 1.3 incorporates two more state representations into forms: $touched and $submitted.

The $touched state

Formerly, the closest thing to $touched was $pristine, which would only be unset if some input was entered into a field, but would not change if the field was merely entered and left as is. Now, $touched will be set if the field notices a focus event, even if the model value does not change. This can be done as follows:

(app.js)
angular.module('myApp', []);

(index.html)

<div ng-app="myApp">
  <form name="playerForm">
    <input type="text" 
           name="playerName" 
           ng-model="player.name" />
  </form>
  <div ng-if="playerForm.playerName.$touched...