Angular Forms - Template Driven Part 2

Hi,

In the last section, we have seen how to register controls, how we can submit the form and also which properties this form has. In this section, we will extend the Forms learning from the last point. Basically, we will see start with local reference way of accessing the form. Therefore, when I mention, local reference, it means I am referring to @ViewChild() property.

Let’s have a look at the snippet for the same.

As you can see here, I have done couple of things. First of all, I have used the @ViewChild() reference to gain the Form access and then used the same in submit call. This also will give me the same result like shown below.

This approach you can use, when you need to have the Form access not only at the time of submit, but also before that. Now, let’s see how to validate the User Input. Since, we are using Template driven approach here, hence we need to add the same in HTML only. Below, I have pasted the short snippet on different types of validations.

Here, in this case, I have considered two different types of validation check. First is required. required is something, which is very common with HTML5. Here, required is basically an indicator to angular, which angular parses and then make this field internally as required field. Then, email is one of the directives used by angular to validate the mail.

Here, I have submitted half filled and in valid form basically. Let’s see what values emitted so far.

This has happened for couple of reasons. First because of mandatory field and second because of invalid mail. Now, let’s fix the same and check again.

At this stage, it will give form state as true.

It is needless to say that it doesn’t only validate at form level rather at individual controls level as well. Now, let’s look at utilizing form state. The easiest way to take form advantage is via submit button. Below is the snippet for the same.

Here, I have used property binding to enable/disable button based on local reference f and valid property. With that being said, it will present me below output. Now, when I enter all the valid values, submit will become enable. Now, taking this one step ahead, let’s utilize its css classes for visual confirmation. These css classes get added automatically by angular. Therefore, we can now go to component style-sheet and use the same.

Here, in the css, I have simply utilized one of the forms state. With this, it will come like

However, this page looks weird as user hasn’t interacted with the form yet. Hence, it would be good, if it appears after some kind of gesture like

So, let’s say If I touch any control and then decide not to enter anything and come out of the control, then it will appear like

Now, let’s extend this example with some valid messages. Below is the finished snippet for the same.

Here, I have done couple of things, like I have utilized local reference at control level so that we can gain the access of control as well. For that, I have assigned local reference field with ngModel. Then, I have a span tag, which is conditionally checking the validity for the control. With that being said, it will appear like

Now, again to wait for user gesture, you can apply touched class like shown below.

Let’s say, now we would like to show some default values in the form. Then in that case, we can use property binding around ngModel and hard-code some value there like shown below in the snippet. One point to note that [ngModel] is property binding here not two-way binding because I am using it without parentheses. Below, is the finished snippet for the same.

Similar thing can be achieved from Typescript as well. There, you can simply create different properties and bind the same with ngModel in HTML. Now, when the form gets loaded, it will show these values as default values.

These values can always be overwritten and you can change the values. Now, let’s look at two way databindng. Two way databinding is the technique which you need to react on the user input instantly. Below, is the finished snippet for the same.

Also, typescript change goes like

With that being said, When I type my reply in the text area, it will get instantly available on the screen as well.

Also, at this stage, If I submit the form as well, even reply will get persisted as form value.

Therefore, in this blog, we have seen couple of things like:-

No Binding:- To tell angular, input is just control via ngModel.
One Way Binding:- To give the control some default value say [ngModel]=”Rahul”.
Two Way Binding:- To instantly output values say [(ngModel)]=”reply”.

Now, this is ok for small forms. However, let’s suppose in enterprise apps, you form size is huge, then in that case it makes sense to divide the forms into some groups. And this can be easily achieved via ngModelGroup directive as shown below.