Angular Template Driven Forms

Name: Angular Template Driven Forms
Author: Michaela Ochnich

This chapter will focus on building template driven forms. You’ll learn how to create the form template and bind it to a data model. You’ll learn about Angular’s control states, and how to use them to handle form validation and display error feedback messages to the user.

Preview the first lesson free — get full access to all 6 lessons.

Request a demo Sign in

Course: On-Demand

This lesson will walk you through setting up the template for your template-driven form. For this demonstration, I'm going to create a simple user registration form. First, I'll generate a component to hold the form and then add that component to the root, and then in this root template, I'll delete all this starter code and add in that form component. Now, when creating template-driven forms, you need to import the FormsModule. So I'll do that now in the root application module. This FormsModule includes all the Angular directives you'll need for building, binding and validating that template-driven form. NgModel and NgForm are two of the directives that you'll be using that are part of this module. NgModel is the directive used for two way binding and NgForm will handle form submission as well as provide validation information. So now, with that imported, I can start building out the template for the form. So opening up that form component template. This form will include fields for a first and last name and email address, a password, a phone number and then the option to sign up for a mailing list. The first name, email and password fields will be required, but then the other fields will be left optional. So here, I'll first create a form, and then here, I'll add the field for the first name and here for the input fields, you'll want to include both the ID and name attributes. The ID is used to match up the input with the label and Angular will need the name attribute for the NgModel and NgForm directives later on. I'm also going to quickly style this form-group class with some margin so that these fields aren't all right on top of each other and then back in the component template, I'm going to repeat this code for the rest of the form fields, and for this email field here, I made sure that the input type is also email so that the required validation later on will work correctly for that field, and here for the email field, you wanna make sure that the input type is set to reflect that it's an email address so that the validation works properly. I'm also gonna do the same for the next two fields, the password and telephone number, and then this form will also need a submit button and then viewing this in the browser, all those fields are set up and displaying here. So that's all for this lesson on setting up the template and the next lesson we'll show you how to bind this template using NgModel.

Intermediate Provider : Michaela Ochnich 6 Lessons · 30m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

What You'll Learn

Create a template-driven form to collect information from the user
Build the form template and bind it to a data model
Use Angular's control states to track form and input status
Implement form validation and display error feedback messages to the user
Handle form submission

Key Takeaways

The chapter focuses on building template-driven forms in Angular, including creating the form template and binding it to a data model.
Angular's control states can be used to handle form validation and display error feedback messages to the user.
The chapter covers form submission as part of working with template-driven forms.
Form validation is addressed across two dedicated lessons (Form Validation Part 1 and Part 2).

Frequently Asked Questions

What does this chapter cover?

This chapter focuses on building template-driven forms in Angular, including creating the form template, binding it to a data model, using control states, handling form validation with error feedback messages, and form submission.

What will I learn to do with forms?

You will learn how to create a form to get information from the user and how to manage form validation and submission.

How is Angular form validation taught in this chapter?

Form validation is covered through Angular's control states, which are used to handle validation and display error feedback messages to the user, and is split across two lessons: Form Validation Part 1 and Form Validation Part 2.

What lessons are included in this chapter?

The lessons are Building the Template, Binding the Form, Control States, Form Validation Part 1, Form Validation Part 2, and Form Submission.

What skills does this chapter relate to?

It relates to Angular (web framework), Angular Components, Angular Reactive Forms, Angular UI, Ng Controller, and Templates.