Get familiar with Forms in Angular

Preamble

For a web application, the Form is probably an indispensable component, because it helps us to collect data from users. In Angular, manipulating From is also an interesting part but equally complicated, so in today’s article we will continue to learn about Form in Angular !!!

Types of forms in Angular

There are 2 types of Form in Angular: Template-driven form and Model Driven form

• Template-driven form is the method in which we will create forms based on the template (just like in Angularjs). We do the adding directives and behavior to the template, then Angular will automatically create forms to manage and use.
• Model Driven Form , also known as Reactive Form , this method avoids the use of directives such as ngModel, required, etc, instead creates Object Models in Components, and then creates form from them.

So how to use or the advantages and disadvantages of each form, here we will go into details of each type of Form, but in the scope of today’s article, I will only introduce Template-driven form , Model Driven forms will be in the upcoming articles.

Template-driven forms

As defined above, the Template-Driven Form creates a form based on the template, in this case, the Form Model (roughly the name of the form in Angular) can be said to be the entire HTML Form template (i.e. the source code in the <form> tag)

The directives provided by Angular include: ngForm, ngModel, ngModelGroup …

Basic Structure of 1 Template-Driven Form :

Flow of activity

1. User changes data in input boxes such as input, checkbox, text area …
2. Input Element will send input event containing value from the user just entered
3. Control_Value_Accessor will trigger the setValue () method on the FormControl instance.
4. The FormControl instance emits the new value over the valueChanges observable
5. Any subscriber goes to the valueChanges observable to obtain the latest value of that control.
6. Control_Value_Accessor also calls NgModel.viewToModelUpdate () to emit ngModelChange event.
7. In case we use two-way binding mechanism, the property in the component will now be updated value by ngModelChange event).
8. When the property in the Component changes, the change detection mechanism starts running and control_Value_Accessor will update the Input Element in the view with the latest value of the property in the component.

Below is the general flow of Template-Driven Form:

Flow of activity

For example

To be able to use the APIs that Angular provides for template-driven forms manipulation, we need to import NgModule FormsModule from the @angular / forms package as follows:

First we need to access the form instance using ngForm like so:

In the above code, we have created a template variable called bookForm , which will be an instance of the ngForm directive, so we can use the public APIs that this directive provides as retrieving its value. like bookForm.value or check if our form is valid or not bookForm.invalid

However, our form is still just an empty form, the next job is to tell Angular which form controls need to be managed. This is when we use the ngModel directive.

We will add ngModel to the controls like so:

Note that we need to declare the attribute name for the form controls, because the form will handle the form controls based on the attribute name. We try to use bookForm.value to see what values ​​the bookForm has:

Result:

Assuming a book variable is available in the component, and we want to bind data for controls to book , now we will use binding for the property, and the property we mention here is the ngModel .

Note that, when updating the form control, the control itself is changed by the form control – bookForm.value, but the book object in the component will not change at all, since we don’t touch it at all. We only have one-way binding, to be able to change the book in the component we must bind back. The above method of binding is also known as two-way binding [(ngModel)].

To add validation for the form, Angular provides some basic Validators that we can use right away in the template such as: required, minlength, maxlength … They are written as directives, so we can use them. like other directives in your template.

For example:

We just added 2 validators for the form control name that this form must be required and be at least 3 characters long. To check and make it easy to observe, we will add an error display like this:

When this input box is left blank, we can see the error displayed on the screen:

or when two characters are entered, the result will be:

When this input is entered more than 2 characters, we will see the key required and the above object’s minlength will be removed. We can use this to control the interface to hide / show errors to the user.

Finally, to complete the above form, we will add a button to submit the form using the ngSubmit directive.

Conclusion

Thus, we can see the use of Template-driven form in Angular is quite easy and accessible for those who are new to Angular. In this article, I have not mentioned custom validation for form control, mostly because Template-driven form is not really strong in supporting custom validation, instead I will introduce this topic in the articles. Upcoming. Hope everyone will continue to follow and support.