One of the common tasks that is performed, while building a Form is Validation. The Angular forms architecture has support for two approaches to validation. Build-in validation and custom validation. In this tutorial, we look at how the validation works in Model Driven Forms in Angular 2.
In this Tutorial, we will look at what Angular 2 Model Driven Forms (also known as reactive forms) are and how to build a simple Model Driven form.
The Angular 2 Model Driven Forms enable us to test our forms without being required to rely on end-to-end tests. The model driven Forms allows you to have an ability to setup validation rules in code rather than as directive in Template. You can subscribe to field value changes in your code. Since everything happens in Component class, you can easily write unit tests against them.
It is very common that the users will make mistakes when filling out the web form. This is where the validations come into play. The validation module must ensure that the user has provided the accurate and complete information in the form fields. The validation error messages must be displayed to the user. In this tutorial, we will look at how Validations are handled in Template driven forms in Angular 2
In the last tutorial, we looked at how to create Template Driven forms in Angular 2. We will add the validation rules to the sample project, we built in that tutorial. You can download the source code from GitHub. The initial source code is available under the folder TDF-FormGroup and Final Source code is available under the folder TDF-Validations
In this tutorial, we will look at what Angular 2 Template Driven Forms are and how to build a simple Template driven form. First, we will add few input fields in our Form and bind it to Angular Forms Module using ngModel directive. We will show you how to group related Form fields under the FormGroup. Finally, we will submit the data to the Onsubmit method in the Component class. We also look at how to initialize the form field with the default values using one-way and two-way binding.
The Angular 2 forms are used to collect the data from the user. In this Angular 2 Forms tutorial, we look at what is Angular 2 forms are and in the subsequent tutorials, we will see how to use Angular Forms with sample examples. In this tutorial, we are going to look at the building blocks of the Angular 2 Forms, FormControl, FormGroup & FormArray