In this tutorial, we will learn how to set value in template-driven forms in Angular. We will learn how to set the default or initial value to form controls, dynamically set values, reset the value of the form, etc. Learn how to set the value of individual FormControl or a FormGroup and nested FormGroup.
Angular Template-driven Forms is one of the two ways of building forms in Angular. In this tutorial, we will learn how to build a simple Template-driven forms example app. First, we build a simple HTML form using a few form elements. The ngForm directive will convert it to the Template-driven form and create the top-level FormGroup control. Next, we use the ngModel directive to create the FormControl instance for each of the HTML form elements. Later, we will learn how to submit the form data to the component class. We will also learn how to initialize or reset the form data and use the data binding to access the data in the component class.
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