Angular form control and form group

In this video we will discuss FormControl and FormGroup classes

Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/09/angular-form-control-and-form-group.html

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Slides
http://csharp-video-tutorials.blogspot.com/2018/09/angular-form-control-and-form-group_24.html

Angular 6 Tutorial
https://www.youtube.com/playlist?list=PL6n9fhu94yhWNJaDgh0mfae_9xoQ4E_Zj

Angular 6 Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2018/09/angular-6-tutorial-for-beginners.html

Angular, JavaScript, jQuery, Dot Net & SQL Playlists
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

When working with reactive forms we create instances of FormControl and FormGroup classes to create a form model.

To bind an HTML form tag in the template to the FromGroup instance in the component class, we use formGroup directive

To bind an HTML input element in the template to the FormControl instance in the component class, we use formControlName directive

formGroup and formControlName directives are provided by the ReactiveFormsModule

Both FormControl and FormGroup classes inherit from AbstractControl base class

The AbstractControl class has properties that help us track both FormControl and FormGroup value and state

The following are some of the useful properties provided by the AbstractControl class
value
errors
valid
invalid
dirty
pristine
touched
untouched

FormControl instance tracks the value and state of the individual html element it is associated with

FormGroup instance tracks the value and state of all the form controls in it's group

To see the form model we created using FormGroup and FormControl classes, log the employeeForm to the console.

onSubmit(): void {
console.log(this.employeeForm);
}

To access a FormControl in a FormGroup, we can use one of the following 2 ways.

employeeForm.controls.fullName.value
employeeForm.get('fullName').value

Note: This same code works, both in the template and component class.

In addition to these properties, AbstractControl also provides the following methods. In our upcoming videos we will use these properties and methods for form validation and working with data.
setValidators()
clearValidators()
updateValueAndValidity()
setValue()
patchValue()
Reset()