[MUSIC]
We just completed learning about template driven forms in
angular in the previous lesson.
Angular also supports another way of designing forms called as reactive forms,
the reactive forms use the reactive style of programming for supporting forms.
We'll talk about reactive programming briefly in
one of the later lessons in this module.
But right now, we'll deal with reactive forms and
see how we can design reactive forms in angular and
what are the unique features of doing reactive forms in angular next.
The reactive style of programming advocates explicit management of
data flowing between the non-UI data model and the UI-oriented
form model and this is the approach that reactive forms take in Angular.
Now that might not make much sense to you at this moment but as we complete this
exercise and the lecture, it'll become even more clearer to you
why the reactive approach suits that form design in certain contexts.
Now in the reactive approach, we create a tree of angular
form control objects, within the component class.
Now in the template driven forms that you have seen earlier,
we design the forms using the HTML template approach, so
all the form controls we're put into that form in the HTML template and
we're primarily manage data and they we're tied into their
component object through the NG model directly.
In this approach, we will create that form structure in our component and
then tie the form structure into firm controls in our template, so
we'll bind the form tree that we
create within our component class to the native form
elements within our template file there.
So, in this approach the component class has immediate
access to both the data model as well as the form control structure and so
we can then take the data model and push it in to the form control structure and
correspondingly take the information out of the form control structure and
then map it in to the data model.
So the data model coming in from the back end can be mapped in to form
control structure which is reflected in to the view through that template
and the bridge between them is done within the component class
by creating the form structure inside the component class.
Now, this doesn't make a whole lot of sense to you at this moment, but
when we do the exercise, it will become even clearer to you how this
binding between the data model and the firm control structure can be accomplished
inside the component class in the type script code of the components class.
So this is where we will leverage reactive patterns, testing and
validation to great advantage, so this reactive
form approach supports reactive patterns of programming, as I said, we'll talk
more reactive reactive programming a little bit later in this module.
Also, the fact that we create the forms in code
means that testing and evaluation of forms becomes a lot more easier.
Template driven forms are very hard to test
because much of the structure is in the template code, so
the reactive approach lends itself much better for unit testing and
also for form validation as we'll see a little bit later in the exercise.
Let's briefly reflect on some of the advantages of using reactive forms.
One of the advantages is that the values in the form that elements
are immediately available and synchronous with the abstract code.
In template driven form it takes on cycle for
any changes written the template to be reflected into your code there,
but in the reactive approach, the synchrony bit, the data and
the view is tightly maintained.
Second, the reactive forms, as I already mentioned,
are easier to do unit testing and this becomes very crucial
when you are designing a very complex angle replications.
The Reactive forms are supported to some
classes that are available to angular forms library.
One of them is the FormControl class which powers the individual form control is
that we include in our form the individual elements and also enables us to
track the value of those limits and do validation of those elements.
The FormGroup is a group of FormControl, so
when you want to organize FormControls together as a group and
then track information about those group as a whole, then the FormGroup
enables you to agglomerate a group of FormControls together.
In addition, we also have an AbstractControl class which is an abstract
based class for FormControl classes, which can also be used to our advantage
although we want to see them specifically in the exercise later on,
but we will come back to use them at a later time.
And also we have a FormArray class that enables you to define
a numerically indexed array of AbstractControl instances,
again, both the AbstractControl and the FormArray, we won't explicitly examine
in this particular lesson, but we will see them later on in the course.
Another interesting aspect of reactive forms
is the availability of the FormBuilder.
The FormBuilder class allows use to create the forms within our TypeScript code and
then be able to tie them up with that template controls there.
So to use the Form Builder Class you import the Form Builder from the angular
forms and then there after you can use the Form builder to construct the form,
like if you use and do which your Form converter classes and the Form group
classes as we have seen in the previous slide that code is a bit more elaborate.
But using the FormBuilder class, it reduces the repetition inclitic of in your
code and makes it a lot more compact for defining fonts.
We will use the FormBuilder class as the approach for
building forms in the exercise that follows and
this example is derived from the exercise that you will do right after this lecture.
So here you can see that we have built up a form, as a group of these form control
elements and each of them having specific name and also the value given to them.
By creating the form model in our typescript code,
you don't automatically populate the form model, you need to exclusively populate
the form model especially if you get the data in a data model,
then the data model needs to be mapped into your form model to fill the values,
so the form model and the data model are kept separate in reactive forms.
In the template driven forms you saw that we we're directly trying into the data
objects from the template file to our abstract code.
So in this case the form and data model are kept separate, so
any changes that you make to the DOM
elements in your form will flow into the form model and
you have to explicitly reflect the form data back to
that data model even through a service or whatever means that you choose,
so this separation helps us to design our code much better, as we will see later.
Two methods are available for us to populate a form model from a data model.
We have the setValue() method, which enables us to assign every form control
to a particular value from the data model or we have a patchValue(),
which enables you to update only some controls within your form model.
So once you get the data model from the back end, from the data model,
you can patch in the values into your form model or map the values from
your data model into your form model, very often, we will create the data model,
which reasonably closely mirrors the structure of the form.
In the exercise that follows you would see that I have a data model
which is based upon a class,
which mirrors very closely the form model that we use within our example there.
With this quick understanding of reactive forms, let's now proceed to the exercise
where we will double up a reactive form within our angular application and
along the way consolidate some of the terminology and
also some of the ideas that we have just explored in this lesson.
[MUSIC]