Angular simple dynamic template-driven form for beginners
In this blog, you will learn how to approach Angular template driven forms. Angular forms help you to create custom form controls and validations. The form controls can hold data values and form validation data. There are two types of handling user inputs by forms in angular. Those are reactive forms and template driven forms. Both types of forms catch user events from the view.
Template driven forms are model driven forms driven by directives in a template. Template driven forms are approached by angular JS users but sometimes template driven forms will be used for complex systems. For instance, if you want to dynamically set to validate a particular form filed you can use template driven forms. In the template driven forms uses two way data binding in terms of it uses ngModel despite formControl and fromGroups.
Form structure
I am going to create a simple form that is able to create new form fields. The number of form-fields depends on the user. It can be changed at run time.
However, each form entry requires a name like formControlName in reactive forms and the state of the form as a whole that is a collection of individual form fields. Each form filed is assigned a unique id property. Therefore, template driven form controls need to be uniquely named. We can generate form fields using a unique control name. In this dynamic form, it has been used the current timestamp as a unique id or you can create a method to get random numbers to assign for this unique id. So it can get through with parent NgForm.
First, import formsModule to main module ex:- app.module.ts then create an interface to describe an object. You have to set some properties you want to this interface.
As you can see, you can generate many forms by clicking the addForm button. So this template driven form uses the ngFor directive to loop each instances, assigning set of ngModel-driven inputs. Initially, the form has one instance. Each form should have a unique id to set the fact of template driven form. The form uses the ngModel directive instead of using form-control.
NgModel Validation
I have added simple validation to teach how we can add validation on html. So you can add HTML 5 validations like minlength validation, maxlength, pattern validation, email validation and etc.
Angular is always listening the form validity and this functionality is common for both reactive and template-driven forms. There 3 types of validations in an angular form,
- touched or untouched
- valid or invalid
- pristine or dirty
I have not mentioned about custom validations which are not HTML 5 validation, in angular forms. If you want to custom validation check out this article.
Summary
Angular template driven forms is based on models and it’s simple compared with angular reactive forms. The angular identifies the form tag then it changes the form to Angular form. Unique ids are assigned to each form element and ngModels also. ngModel converts each form elements to formControls like in reactive forms.
Read more articles on angular forms. Hang on for more articles 😉.
Reference — https://angular.io/guide/forms
