The course is completely focused on practical scenarios and real-life project challenges that will teach step-by-step how to fully master Angular forms.

angular.tar.gz

angular_basic

Forms play a central role in many web applications. It is therefore essential to know how to make the best use of them. 

We'll start with a basic Angular form, add new functions with each iteration, and touch on concepts such as asynchronous and cross-field validation, dynamic fields rules, and strongly typed forms that came with Angular v14. Finally, we will learn how to generate fully dynamic forms using server-submitted configurations.

The lessons target practical scenarios experienced in projects of different sizes. Each chapter offers an increasing level of complexity and provides many coding exercises to test the topics covered in the course.

By the end of this course, you will be ready to implement any complex form requirement using the rich Angular Reactive Forms API set.

Mastering Angular Reactive Forms

For both form types, Angular provides classes that constitute the forms' foundations with different levels of granularity. All these classes inherit from a base class called `AbstractControl`.

We need to familiarize ourselves with these concepts before proceeding and describing the main differences between template-driven and reactive forms.


- `FormControl`: This is the base element. It allows managing the value and the status of an individual form control, like an input field, a drop-down, or a check box.
<ul>

```
const firstname = new FormControl('Francesco');
```

 The snippet above creates a new FormControl instance with a string as the initial value. For instance, if we associate this control with an input field in a form, it will immediately display the text given as an initial value.</ul>

- `FormGroup`: This aggregates multiple controls (`FormControls`, `FormArrays`, or even other `FormGroup` instances) into a single object. Its status is given by the sum of the statuses of all its child items. Any time the value of a control changes, Angular triggers a validation cycle that returns `null` if no errors are found, some error objects if validation rules are broken. According to the result, the form control will be in a `VALID` or `INVALID` state.
If any child control is invalid, the parent `FormGroup` will also be invalid. 
<ul> 

```
const homeAddressForm = new FormGroup({
  street: new FormControl(''),
  city: new FormControl('', Validators.required)
});
```

This example shows how we can group multiple `FormControls`. For the `city` field, we used the built-in `Validator required`. If the user doesn't provide a value for this field, the controls will have an invalid state. As we explained before, the parent `FormGroup` will inherit this state, being invalid as well. This mechanism helps us to manage `FormGroup` collectively.
</ul>

- `FormArray`: This groups multiple controls into an array. It's very similar to a `FormGroup`. The difference is that it creates an *array* instead of an 
 (parent) object of controls.

<ul> 

```
const addresses= new FormArray([
  homeAddress: new FormGroup({...}),
  workAddress: new FormGroup({...}),
]);
```

In this case, we use two instances of `FormGroup` inside a `FormArray`. Each `FormGroup` can contain multiple `FormControls`. This creates complex and dynamic structures and integrates slices of child forms.

</ul>

Learn about the different types of forms in Angular.


__default

Two Types of Angular forms