Angular Template Driven Forms - Part Seven

Here we’ll start learning building forms in Angular. At the end of this article, we’ll be able to implement forms with different kinds of input fields, such as textboxes, checkboxes, radio buttons, and dropdown lists. We’ll be able to display the validation message next to input fields and disable the "Submit" button if the form isn’t in a valid state. But if you’ve not read my previous Angular articles, then you can start your journey from here.

• Introduction And Setting Up The Environment - Part One
• Typescript in a Nutshell - Part Two
• Building Blocks of Angular - Part Three
• Binding Variations And Displaying Data - Part Four
• Building Reusable Components – Part Five
• Directives – Part Six

Now, let’s get started.

Building a Bootstrap Form

So now, we’ll build the bootstrap and then we’ll apply the validations upon the form. So, let’s open the terminal and generate a new component.

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng g c contact-form

Go to contact-form.component.html and replace the HTML script.

We can generate this HTML through Zen Coding. If you don’t know about Zen Coding, have a look here.

Label[for=’firstName’]+input[id=’firstName’][type=’text’].form-control Press TAB

It will automatically generate your HTML. But the Bootstrap requirement is that the elements should have in the form-group div. So,

div.form-group>label[for=’comment’]+textarea[id=’comment’].form-control and press TAB

It will generate your 2^nd div and enclose your 1^st div elements in form-group div manually. Now, it is the time to generate the button with Zen Coding.

button.btn.btn-primary Press TAB

This is how we use Zen coding.

Now, open contact-form.component.ts and change the name of the selector.

Now, open app.component.html and remove the existing text and write the contact-form HTML element.

Save all the files and run the application by executing the following command in terminal.

PS C:\Users\Ami Jan\HelloWorld\MyFirstAngularProject> ng serve

And have a look at how our form looks in the browser.

Types of Forms

So, we’ve built this simple form and now we need to add the validations to it. In Angular, we have a class called FormControl for each input field in our form. We need to create an instance of the Control class. With this instance of Control class, we can check the value stored in the input field. We can see if the input field has been touched or untouched; we can see if it is dirty (means its value is changed) or we can check if the control is pristine (means value is not changed); whether it is valid or not and if it is not, what are the validation errors. So, for each input field in the form, we need a control object.

Similar to the control class, we’ve another class called FormGroup which represents a group of controls in a form. Each form is essentially a control group because it contains at least 1 control but in the complex application, you might have a form with multiple control groups i.e. you might have a control group for the shipping address and another for the billing address. And interestingly, all the properties which you’ve seen above with FormControl are also available with FormGroup.

So, to add validation to the form, we need to create the FormGroup object for the form and FormControl object for each input field of the form. In this way, we can keep track of the state of each input field and the entire form as a whole.

Now there are 2 ways to create these control objects. One way is by applying some directive in our template and Angular will create these control objects for us implicitly under the hood. We call form that is built in this way Template-driven forms. So we build them using the template. Another approach explicitly creates these control objects, so in our components, we should write the code to create a new instance of the control group and control objects. We call forms that are built in this way Reactive form. Previously, they used to be called Model-driven forms but now, they’re called Reactive form.

Now you might ask what is the difference between template driven forms and reactive forms. The difference is that when we create the control objects explicitly we have more control over validation logic. And it is good for complex forms and also another benefit of this approach is that we can unit test the validation logic of our form. Otherwise, if we want simple forms where we want some basic validation like making something required, or setting the range of the values of the input fields, then we can use template-driven forms. Those are easier to create and we write less code. Here we’ve less control over the validation of our form.

ngModel

So, we’ve built this basic bootstrap form. Now, we want to add validation to this using a template-driven approach. As we discussed above, with the template-driven approach, we apply the directive to our input field and Angular will create a control object associated with that input field under the hood. We already know that directive ngModel, we were using this directive for the 2-way binding purpose. But here, we’re using the ngModel directive in the form without any binding. Angular will create the control object under the hood.

Now, let’s preview it in the browser.

And in Chrome, we get this error “if ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as ‘stadalone’ in ngModelOptions.” So basically, the reason we got that error is that we didn’t set the name attribute in the input textbox, this is the requirement. Because every time we apply the ngModel on an input field and it needs the way to distinguish these control objects. And here, we set the name attribute.

And now, the error is gone. So, you can see we use ngModel with name attribute to implement template driven approach. But let’s explore what is happening under the hood. I want to handle the change event of this input field and here, we will call the log method and here, we need the reference of ngModel directive and we want to pass the reference to the log method. So, we can log on the console. For that let us create the template variable.

#firstName=""

Here, we can call anything in the input id.

So when Angular sees this, it sets the template variable to the ngModel directive which is applied on this input field. Then, we pass this method to our log method.

Now, let’s go and implement this method. So, back in our component -

Now, back in the browser, give some value in the firstName textbox and press tab or focus out from the textbox with the help of mouse by clicking somewhere else in the browser. You’ll see the ngModel object in the console.

You can see the property control in the ngModel object, so this is the property we’re discussing above. And you can see this control property itself is an instance of FormControl in Angular. And we’ve discussed the properties of FormControl class above. Now if you expand it more here then you’ll see those properties here.

So if you see the properties with full attention. Dirty is true because I’ve typed my name and dirty property is the property in which the value is changed. Now the opposite property is pristine which is false. We’ve another pair which is invalid and valid, in this case, because we haven’t implemented validation yet so this input field is valid and invalid is false and valid is true. And if we’ve any validation error, they will be available in error property which is null right now. We’ve another pair which is touched and untouched. In this case, because I’ve touched the input field, or in other words, I put the focus there and then moved away touched should be true and untouched should be false. Value property returns the current value of the input textbox.

So what we note here is that we use this FormControl class to track state changes and the validity of the input fields. When we apply the ngModel directive along with the name attribute in the input field. Angular automatically creates an instance of FormControl class and associated with this input field. Now let’s attach ngModel with name attribute with other input elements as well.

Adding Validation

Now let’s make this firstName field required. So in HTML5 we can use required attribute on the html elements. And in Angular we also use this attribute and we attach a div next to the input element to display the error message and we attach the bootstrap classes as well to make this div message more pretty.

We don’t wanna display this all the time, we wanna display this only if the input field is not valid. So here we use ngIf directive and here you might be thinking what is the check we’ll use here. So the answer of this question is we check the valid property of FormControl and if the valid is true then it is ok otherwise there is a problem.

So let’s test the result.

So here the validation message is initially appeared on the screen which is not good and we need to fix this. But before fixing this issue, if you write something in this textbox you’ll see the validation message is disappear and if you again remove the text the validation message appears which means our validation message is working. But let’s fix the issue, we just want to show when the input field is focus out and if the text is valid then it is ok otherwise show the message.

And now it is working properly.

Validation Error Messages

So we have seen the required validation error. In Angular we have few built-in validators that are based on HTML5 validation attribute. So let’s say we want to set the minimum and maximum length in characters of firstName.

Now let’s say we want to set the pattern for firstName then we’ll use the pattern attribute in which we’ll use the regular expression. But for demo purpose here we just write the name of any keyword in pattern attribute.

So just apple is the valid value in this input field.

When we’ve multiple validation attributes, we can’t show them all the validation messages with just one div like we’re doing here.

We place multiple divs with *ngIf directive.

Now, let’s inspect this in the browser. So here, we see the results,

This is how the multiple validation constraints work in an input field. So, we just use HTML5 standard validators and for each validation message for the validator, we’ve a separate div. Now, let’s see the content of the errors object.

Now as you can see, we’ve 2 more properties in minlength. And we can also use them dynamically in our application to generate the dynamic message in the browser instead of hard coding the numbers. So,

And now if we open the browser. And yes it is working properly and showing us the validation message in the browser.

Styling Invalid Input Fields

Now you know how the error message is showing into the browser. As the best practice, we should highlight the invalid input fields. This improves the usability of our form. So let’s see how do we apply the red border to this input field? Let’s inspect the input textbox.

Look there are so many attributes in the input field. Don’t worry about them. Just focus on the classes of the input fields and we’ll apply the css on these classes. For styling we’ve 2 options either to choose the component css file for styling or to choose the global file style.css and as we want to apply the css globally in the application so that wherever we’ll display the validation message, the input textbox should be bordered with red.

Cleaner Template

As you build forms with Angular, you’ll notice that templates get more complex. And we need to scroll horizontally a lot. And the best practice is that your code should be formatted in such a way that another developer doesn’t have to scroll to the right and to the left to see what’s happening. So the cleaner way is to write the template, break up the horizontally lengthy lines (1 attribute on each line)