ANGULAR 15 REACTIVE FORM : USING FORMGROUP AND FORM CONTROL

In this tutorial, we will see how to create reactive forms in Angular 8 using Formcontrol and FormGroup.

1.FormControl:
In FormControl, we can create the instance of the formcontrol in the component class.
For eg.
email = new FormControl('');

Here we have created a instance of the FormControl in the component class named as Email.
And in the Html, we can use the created instance for creating the html element.

We can access this FormControl in the component class to get or set the value.

2.FormGroup :
The FormGroup is nothing but the collection or a group of FormControls.

For eg :
userprofileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
age: new FormControl(''),
email:new FormControl(''),
});

Here, we are defining a FormGroup named as "userprofileForm". In this formgroup, we have 4 controls named as firstname,lastName,
age and email.

we can declare them in the same fashion in the html .

And in the form element , we just have to name the formgroup.
eg: [formGroup]="userprofileForm"

How to access the formControl within the formgroup :
For eg:

So here we are accessing the formControl named as "firstName" in the fromgroup named as "userprofileForm".

Form Control Validation:

userprofileForm = new FormGroup({
....
});

Here we are making the firstName formcontrol as mandatory.

The FormGroup has a inbuilt property named as valid.

Else it will return false.

#Angular #Angular 8 #Angular 10 #Angular 12 #Angular 13 #Angular 15

[dregavero]

Nice tutorial, easy to follow, thanks! 🙂

[JoseAlvarez-dlhm]

Thanks a lot! That was really clear and concise.

[mohdabdulahad]

thanks for nice video kindly also try to upload the source code...appreciate your work u very much

[denisr.]

great video but how do you bind the value to the value of fromGroup Controller for exaple the first name ?

[CodeNinja]

Very clear... please don't zoom screen, we r able to see clearly.

[KLNNNN]

hahahahahhahaha this voice cracks me cannot take it anymore hahahahahaha

[kouverbingham]

On the FormGroup section, what if additionally you wanted to have a cancel button, which does not submit, or does something else, like reroutes. This would also fire ngSubmit. An undesired result.

[KrishnaReddyKovvuri]

error NG8002: Can't bind to 'FormControl' since it isn't a known property of 'input'. i am getting error

[rkeusgba]

What a page has multiple rows to update how to do that and how to track what values are changed

[jesse]

Why do you put formgroup in square brackets but formcontrolname without square brackets?

[khusikar]

And here I want button will enable condition base... Like if the name or email one of them is selected this button will enable....
Can u plz help meee

[jyotimahajan]

Cannot create property 'validator' on string '6-28-2020' geeting this error when using formControl

[arijitchakrabarty]

tried this method but every time i submit, the page reloads and there is no data in console. can u help?

[zekariyasmulugetaaltaye]

great video. but how does no body say anything about his voice?

[sharma]

Using import map shows rx error.. Could you tell how to use map in angular.. What need to import

[bantasingh]

Cannot find control with unspecified name attribute

[khusikar]

Hiii can we do 2way data binding on reactive form...
I mean...
I hava a data which I fetching from api...
I am display data.name but need to pass data.id when I creating new list of data...
And onedit I have to set the value.... But I am not able to do tht what have to do....
Can u plz suggest???

[reddyroyal]

Instead of console, how these data post to web API?

[harshbhardwaj]

bro your screen zooming irritates. we are not blind. humbly request you plz don't do this from now on in your videos. it degrades you traffic over video.