Chapter 10. Introducing the Forms API

HTML provides basic features for displaying forms, validating entered values, and submitting data to the server. But HTML forms may not be good enough for real-world applications, which need a way to programmatically process the entered data, apply custom validation rules, display user-friendly error messages, transform the format of the entered data, and choose the way data is submitted to the server. For business applications, one of the most important considerations when choosing a web framework is how well it handles forms.

Angular offers rich support for handling forms. It goes beyond regular data binding by treating form fields as first-class citizens and providing fine-grained control over form data. In this chapter, we’ll introduce you two Forms APIs: template-driven and reactive.

10.1. Two Forms APIs

Every Angular-powered form has an underlying model object that stores the form’s data. There are two approaches to working with forms in Angular: template-driven and reactive. These two approaches are exposed as two different APIs (sets of directives and TypeScript classes).

10.2. Template-driven forms

10.3. Reactive forms

10.4. Forms API directives summary

10.5. Updating form data

10.6. Using FormBuilder

Summary