FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.4 Reactive Forms

In this lesson I'll show you how to create a form using reactive forms instead of template-driven forms. You'll see the directives that you need to employ and the techniques that you'll need to make use of to construct the form from the component class.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


5.4 Reactive Forms

Hi folks, in this lesson we're going to take a look at reactive forms in Angular. Template driven forms are very easy to work with and we can do a lot of stuff, like working with error messages and validation purely in the template. But we do sometimes see things like timing issues between the form and the template. Reactive forms are slightly more complex than template driven forms but we don't get these timing issues. And so reactive forms are sometimes preferred. Reactive forms can also be much easier to test. This start component then has this template driven form, and we've got the validation hooked up, and everything is working as expected. There's no reason to change this. Reactive forms won't give us anything extra here. So let's keep this form how it is already. For our reactive form we can add a new component. A feedback component. And let's add that using the CLI. So now we have a shiny new feedback component. Let's add the components to the home component. We'll want to show the form when, say, an element is clicked. So let's add a trigger element and the feedback component to the header in the home component. So we've added a span element that has a click event binding, and we've added the selector for our feedback form with an ngIf directive that only shows the form based on the value of the viewFeedbackForm property. So now we need to add this property and the click handler to the home component class. So we can set that to false initially, and we don't need to add any typing because it's implied from the value. So now let's add the click handler. We can just set the value of the viewFeedbackForm property to true. So let's just take a look in the browser. So we should find that we have this feedback link now in the header. And when we click that, it shows the feedback component. And by default, the template for any component just says the component works. Okay, so now we can start with the reactive form part. So unlike with template driven forms, we won't necessarily start with the templates, because the form isn't driven by the template, so why would we? So a few videos ago, when we wanted to use template driven forms, we had to bring in the forms module. So now that we want to use reactive forms, we'll need to bring in the reactive forms module. So let's put this into the app module first of all. And again, we'll need to add that to the imports array. So the reactive forms module comes from the forms module just like the template driven forms module does. And now let's go over to the new feedback component itself, and that's where we'll build our form. So let's import some form stuff from Angular, first of all. So we'll want to bring in the FormGroup like we did with our template driven form, but we also want to bring in this FormControl class as well. So lets make a start, first of all we want the property of the component to store the form in. As before, the form will be of the type FormGroup. Now in the ngOnInit, we can create our form. FormGroup is a class so it has a constructor. So we just need to new up an instance of it for our property. We get some red underlining. Let's see where that's coming from. And we can see that the constructor expects at least one, but possibly three arguments, but it got zero. So when we create a new FormGroup, we can also create some new FormControls at the same time. And we do that by passing in objects to the constructor. And this is where we can actually create the individual controls that will make up the form. So let's have those now. So we've created four new controls. And those controls are called name, email, telephone, and message. And each one of those is an instance of a FormControl. So this is exactly what would happen in a template driven form, except that Angular would do all this stuff internally. The FormControl class, whose constructor we use to create the individual FormControls doesn't take any arguments. And so, at this point, there's nothing more that we need to do. So, let's just log out the feedback form momentarily. And let's go back to the browser. So we won't see that log until we actually open the feedback form because Angular won't create the component until it's actually visible on the page. So here we can see the form, and as I said, it is an instance of a FormGroup. And there are lots of things here, but we can see that there's a controls property, and it contains all of the controls that we created. So the form itself has a lot of properties and methods, and we can see that the status of the form is valid initially, because we haven't added any validation here. And let's just open up one of these controls, and we can see that these also have a lot of properties and methods. So now that we have our form, we can move onto add the template in the feedback component HTML file. So let's get rid of the generic message, and let's add the markup for the form. So we'll start with a container div. And we can then add a form inside of this. So now we need to link the form to the form object that we created in the class. And we do that using one of the directives from the reactive forms module. We use the FormGroup directive to link the form template with the form object back in the class. And let's just go back to the browser briefly. And we can see that our feedback component does exist now, and we can see that the form has had the no validate attribute and the form classes added to it. Now let's go back and add the FormControls. We can use a similar structure in terms of markup that we used for the last form. We can have some row containers and then the labels and inputs will go inside of these containers. So we've added the first one, the input for the name, so we have a label for the inputs, and then we've used another of the reactive form directives. This time the directive that we've used is FormControl name, and that allows us to link in input element in the template with one of the FormControls inside the form object. And in this case it's the name control. So let's add the other inputs now. So we've used the same row container for each row of the form. This has nothing to do with Angular, this is just first timing purposes. And to link each control to the correct control in the form object, we use the FormControl name directive, which also comes from the reactive forms module. The value we give to this attribute is the matching key name for the control from the objects that we passed to the FormGroup constructor. So let's go back to the browser again, and let's click the Feedback link. And now we see the whole form and it looks awful. We'll fix the styling shortly, but we can see that it's working. So in this lesson we saw how to use reactive forms to create a more programmatically-driven form. We saw how to manually create a FormGroup in the component. And then specify the individual controls we want by creating individual FormControl instances. We also use the FormGroup and FormControlName directives that we need to use in the template to link the form object to the form elements. Thanks for watching.

Back to the top