Creating Advanced Forms

AngularJS builds upon standard HTML forms and input elements. This means that
you can continue to create your UI from the same HTML elements that you already
understand using standard HTML design tools.

So far, in our SCRUM application, we've created some basic forms with input
elements bound to model data and buttons for saving and deleting and so on.
AngularJS takes care of wiring up both the element-model binding and the event-
handler binding.

In this chapter, we will look at how AngularJS forms work in detail and then add
validation and dynamic user interaction to our application's forms.

In this chapter we will cover:

• Model data binding and input directives


• Form Validation


• Nested and Repeated Forms


• Form Submission


• Resetting a Form

Comparing traditional forms with AngularJS forms

Before we begin to improve our application's forms we should understand how
AngularJS forms work. In this section, we explain the differences between standard
HTML input elements and AngularJS input directives. We will show how AngularJS
modifies and expands the behavior of HTML input elements and how it manages
updates to and from the model for you.