With a brief understanding of Angular Reactive Forms,
let's proceed to the next exercise.
In this exercise, we will construct
an Angular Reactive Form in the Angular application that we have been working on so far.
Along the way, we will consolidate our understanding of Angular Reactive Forms.
To get started on the exercise,
the very first step that we need to do is to import
the Angular Reactive Forms module into our app module.
So, let's go to the app module,
and then we see that we had already imported the forms module earlier.
We will also import the Angular Reactive Forms module.
So, I'm going to copy that, paste that here,
and then change that to the Angular Reactive Forms module.
After we do that, we also need to include that into our decorator.
So, going down to the decorator here,
I'm going to import the Reactive forms module in the decorator.
Two other modules that we need to import for
our form is the MatSelectModule, and the MatSlideToggleModule.
The select module allows us to use the select element,
and the SlideToggle enables us to use the slide toggle in our form.
So, to do that, we'll type in
import MatSelectModule from angular/material/select,
and import MatSlideToggleModule from angular/material/slide-toggle,
and then we need to add them to our nGModel decorator in the imports.
So, going down there,
let me import the MatSelectModule and MatSlideToggleModule in there.
So, with this changes,
our app module is now ready to enable us to
use the Reactive forms module in our application.
In the next step,
what I'm going to do is to create a class here called as Feedback.
So, I will create it in the shared folder in the filename feedback.ts.
Now, this is the structure of the class that represents
the data model corresponding to the form model that we're going to
use within our Angular application.
So, I create the class named feedback.
Within the Feedback class,
I'm going to include a few properties;
first name, last name,
then telephone number, Telnum, email,
then I agree which is a Boolean variable,
Boolean property, contacttype which is of the type string.
It'll become more clearer to you why I include all
these when we look at the form design itself.
This particular feedback class corresponds to the feedback that
a user can submit about our restaurant within our Angular application.
So, that's the reason why I create this Feedback class.
We're going to map this into the form model in
one of the components there and also along with that,
I will export a constant which is a string array called
contacttype which as I
mentioned is a string array containing three strings here,
none, Tel, and email.
So, now our data model structure is ready.
So, later on when we develop our server-side,
we will be able to map this into a data that we store on the server-side.
So, within our Angular application,
this forms the data model that we're going to use for our application just like the dish,
the leader, and the promotion that we have developed this is another class that
enables us to group together a set of properties into a class here.
So, once we have completed that,
let's proceed ahead with creating the Reactive form.
We're going to create the Reactive form in our contact component.
So, let's go to the contact component.ts file,
and also we're going to include
the corresponding form in the contact components template file.
So, in the contact components type script file,
so this is where we're going to prepare our form
as we saw the Reactive form is built mostly
in the code and then thereafter mapped into the form elements in the template file.
So, here I'm going to import a few classes.
I'll import the FormBuilder,
then FormBuilder, and validators.
Validators would be used for form validation which will be in the next exercise,
but I'll import them at the moment already.
These are imported from the Angular forms library.
So, once we import this,
we will import the Feedback class and the contacttype constant
from the shared/feedback file
that we just created in the previous step.
We need this within our application.
Now, inside my class here,
I'm going to declare a few variables called feedbackForm which is of the type FormGroup.
This is the form model that is going to host
the Reactive form here and then I will also
declare a variable feedback of the type Feedback,
so this would be the corresponding data model.
Later on this Feedback value can be fetched from a server within our application,
and then also I will declare the contacttype as a variable
which is of the contacttype string array.
Because I need to make use of this within our application.
To construct the Reactive form within the constructor,
I would inject the FormBuilder into the constructor here,
and I would create a separate method called
createForm which I will invoke within the constructor,
so when this class is built the form will be created.
So, the createForm will be a method within which I will create the actual form.
So, let me add in the createForm method here.
This is just convenience I could've simply
included the code directly in the constructor itself,
but you will see that there could be reasons why you
might need to call this createForm from other locations.
So, it is better off to put it into a separate method here.
So, I will create the form here, Reactive form,
and then put it into the feedbackForm variable that I have declared earlier.
So, to create the form,
I'm going to take the help of the FormBuilder,
the FB that I have declared at the constructor,
and then the FB provides a method called Group which allows me to
define a group, a FormGroup here.
So, within there, now I am going to construct the parts of the form there.
So, within this group,
now I can include the various form controls there.
So, I would first put the first name,
then last name.
Note how the fields within my form are
closely mirroring the fields within my feedback class.
They don't have to exactly match, but if they match,
then transferring the data between
the data model and the four models becomes a lot more straightforward.
Telnum which I'm gonna leave 'cause uh-
I've added first name, last name,
Telnum, email, and agree, and contact type,
which I will set as none to begin with.
Recall that the contact type is a string array containing three of them
so you should choose one of them and then map it into this property here.
So, I will choose this as none and then message,
which will be the feedback that the user gives about
our restaurant mapped into a string here.
So, these are the various fields that will form part of our form here.
So, once we have the form's structure in place here,
so you notice that when this method is called,
this form will be the reactive form will be created in the code here.
Now, we need to map this into the view,
into the template there.
So, we're going to do that in the next step.
So, now, going to our template file,
in the contact component template file,
we will scroll down and then include this into
our template file right after this div here,
so we have this div in our contact view that contains the location information and so on.
Right after that, I'm going to create another div inside
which we will host the reactive form there.
Let me apply a few flex layout things
here to my div.
Now, this form size as you can see should be
a CSS class that I will create a little bit later.
Inside this div, I'm going to host my form.
So, once I put this div into my template file,
now let me start out with a heading for this.
So, we'll say, "Send us your feedback."
So, you are seeking the feedback from visitors to your site.
We'll start constructing the form.
So, let me start out with the form tag
here and then we'll build out the form inside this form tag here.
So, for the form, the first thing that I will do is apply
the no validate because the validation will be taken care of by angular,
and then also apply a form group here.
So, notice that this form group is the one that will tie me into the reactive form model
that I created in my code here.
So, by doing this,
we are tying in this reactive form in the template to
the corresponding form model in our typescript file there.
So, the way we do that is we declare the form group and feedback form.
I'll show you how you tie in
the remaining form elements to
the corresponding properties in the form model in a short while.
So, after we do this,
let's put in our form elements into place inside this form model.
So, I will declare a P around here and then inside there I
will use the mat-form-field here,
to which I will apply a CSS class called Half-width,
and close this off.
So, this would put my first form control into place here.
So, in here, I will put the input and then apply the MatInput from angular material here.
To tie this into the property inside my form model,
I would need to do FormControlName,
and the first one is first name.
So, that way, this input is now tied into the first name property
that I have defined inside my form model that I have defined in the code.
The first name, and then I will define
the placeholder as first name.
So, as you would expect,
this input field is going to be used to type in
the first name by the user, type text.
Interestingly, you see that we don't have the ng-model here
or any of the template variables and so on in my form anymore.
Reactive forms operate differently.
So, as you see in reactive forms,
you map the form group and then you try the form control names.
If you are creating form controls with the form control class,
you would declare this as form control within square brackets and then match
it with the corresponding form control that you create in your type skeptical.
But now since we are using the form builder,
I am only needed to tie in the form group like
this in my form to the corresponding form model,
and then the rest of them,
I declare as form control name and then match them to
the corresponding properties in
the form control model that I have in my typescript the code way.
So, this will create the first name field there.
Let me copy this.
I need a last name here.
So, I'm going to copy this and then say form control name is Last Name,
and the placeholder is Last Name,
and of the type, Text, here.
I had first name,
I had last name and if you look at the form control model,
you will see that after first name and last name,
I have the telephone number as the next one,
so I'm going to paste this in here.
Then, the form control name here is Telnum,
and the placeholder is Telephone Number,
and the type is Tel.
While we're at it,
I will tie in the Required into these although that is not really required.
But let me just add that in there.
Now, telephone number then I have email.
So, the next field is Email,
and the placeholder is Email,
and the type is also.
So, now I have first,
last name, and telephone number, and email.
The next thing that I'm going to add in is a slide toggle.
Earlier we use the checkbox.
The slidetoggle is another form control that angular material provides,
which is somewhat different looking than the checkbox and
I thought that I'll illustrate with to you by using it in the form here.
Now, this is where I will use a table to position these elements.
The reason is that,
these elements are hard to position without using a table.
So, inside the table,
I'm sure you all know how to use table,
I tried to position them using the
standard flex layout and was not very successful with that.
So, instead I resorted to using a table to position these two items in my form.
So, mat-slide-toggle.
So, the slidetoggle is like the checkbox,
you can turn it on and off,
and this is allowed to select a Boolean value here.
So, slidetoggle and the formControlName is agree.
If you remember, we had agree,
which was a Boolean property in the form control.
Then, for this, I would say,
may we contact you?
Now, it'll become clearer to you when you see the final version of
this form to understand why we are doing this.
Right now, we'll just put in all the parts into my reactive form here.
The second part I'm going to use a select,
which is supported through the mat-select component in angular material.
So, MD select and for this the placeholder,
I will define as ''How?'',
and formControlName with which I'm going to tie this is
''contacttype'' and close the MD select.
So, this allows me to create a select element in my form.
So, the select element is something that gives me
a pull down list from which I can select one of them.
So, to create the pull-down list,
I'm going to use the mat-option that is available as a component in angular material.
So, the mat-option is included inside the mat-select.
So, for the option,
I'm going to do *ngFor,
and I'm sure you remember the ngFor directive from earlier,
*ngFor ''Let ctype of contactType.''
Now, you see why I declared the contact type variable
in my code earlier and then I would say, [value] = ''ctype."
So, I'm setting up my option in my select here and using interpolation,
I'll type ctype in here.
So, that will give me a pulldown option menu in my form there.
So, that is the next part and then finally,
after the table, I'm going to put in a text area here.
So, I would say p and close off that P. For styling the reactive form,
the P element allows me to position the items properly.
So, that's why I'm using that.
So, as you recall,
mat-form-field allows me to
include an input container here and then inside there I'm going to define a text area,
which I apply
the matInput directive to that.
Then, the formControlName, I'm going to give as ''message''.
So, this particular form element allows the user to type
in the feedback message for my restaurant.
So, placeholder ''Your Feedback'',
and then I will give the text area a size of
12 rows here and then close off the text area.
So, here we have a text area with the 12 rows.
So, that completes most of the form.
Sorry, this should be outside the table.
We need a button to submit the form.
So, right there, I will include a button of the type=''submit'' and
this submit button I will apply
the mat-button and also apply the class="background-primary''.
You have seen me applying this to the button in the previous exercise also,
similar kind of button.
So, now my form is almost ready.
You could add in a few CSS classes to the contact component.
The three classes that I have used is full-width,
this is used to set the size of the elements there.
So, full-width 95 percent, half-width.
So, this allows me to size the elements correctly,
45 percent half-width and then form-size.
So, I use these CSS classes in my form.
So with this, let's save the changes,
and take a quick look at the form in our application.
Going to the browser,
in the contact view,
as you scroll down you now see the form in place in the contact view here.
So, you see the send us your feedback,
the first name, the last name, the telephone number,
the email and the slide toggle here,
so you see the slide toggle in place there and then this is this select.
The select allows me to select one of these three.
The default value is none and then the text area here,
allows me to type in my feedback comments here and then the submit button.
So, this completes the reactive form in
my application but when you click on the Submit button,
you won't to be able to submit this form.
So, we need to add the ngSubmit to our form in the template
and then add a method in our type script file.
Going to our code,
to the form here,
along with the form novalidate FormGroup,
I'm going to add in an ngSubmit to the form.
I'll call the method as onSubmit method.
So with this, my form is now ready to submit information.
I need to go into the contact components,
type script file and then create the onSubmit method here.
So, in the onSubmit method,
it so happens that the form model is exactly the same as the data models,
so I can simply take the value of the form model.
So, when you have a form model like this Feedback form,
the feedback form gives a property called value,
which allows me to retrieve the current value of all these from my feedback form.
So this will form a JavaScript object,
which I can then map into the feedback JavaScript object.
It so happens that, both of these have exactly the same structure,
the data model and the form model.
So, that's why I'm able to quickly load in the value
directly into the data model when the user submits the form.
If your data model is somewhat different from the form model,
you need to map in individual properties explicitly and
that can be done inside this method there.
Just to show you that the form is submitted correctly,
I'm going to log the value to the console, the JavaScript console.
Then I would say, this.feedbackForm.reset.
The reset method allows you to reset the form to its normal state,
removing all the entries that you have done in the form.
So, once the user submits,
you would normally capture the values and then reset the form so
that further input can be done as a separate form.
So that's the reset method that we will use here.
So with these changes,
let's save the changes and then go and see our form in action.
One last little thing that I want to add to my template is to show
you the form values inside my form itself,
although in a real application,
you wouldn't be doing this but I just wanted to illustrate to you how
you can see the feedbackForm's values directly here,
from the feedbackForm model.
So, I can do inside here.
I can say feedbackForm.value and piped through json to show here.
Similarly, I can do here, feedbackForm.
There is another property associated with that form model called status,
which shows me the status of the form at this moment,
whether it is valid or invalid.
So, I'm going to add these two into my form here,
so that this will be shown in my template.
This is just to give you instantaneous view of what
the form model contains in my type script file.
Let's save the changes and go and take a quick look at our form.
Getting back to our browser,
you can now see that the form values are being shown
here and the form is in good form to enable us to type in the values.
So let's type in some random values here and you can
immediately see the value is being reflected in the feedbackForm model there,
right at the top and email.
Doesn't matter, just type in something.
Then, this toggle switch,
you can see that when you turn it on and off,
the agree turn changes from false to true.
So let me leave it at true and then the select.
Let me select email and then you see that the contact type here has changed to email.
So, this is how you would select to change the value.
So, let's say email and then in here,
we can type in the message.
Some random text here and you would be
able to see that the random text is reflected in the message there.
Let's submit the form.
So, when you click on the Submit you immediately see in the console,
the value being printed out here,
in this object here.
So can you can browse to see all the properties for that object,
the feedback form model.
So, this is an illustration of a reactive form within our application.
This completes this exercise.
In this exercise, we have seen how we can create
a reactive form within our Angular application.
This is also a good point at which you can do a Git commit with the message,
reactive forms part one.