How to use formbuilder in angular reactive forms | reactive forms in angular | Angular Tutorial

[Music] to work with the form group and form control in this reactive form we are using these two things first is this form group and second is this form control every time we are using this form group and form control we have to use the new keyword whenever we are creating a new form group either it is at the root level then we have to use this new form group or it is at the child level again we have to use that new form group and even you can see for basically all the properties all the phone we are using this new new new every time there is one better approach that you can use in this angular application to avoid all these new new new keywords let's understand how can we avoid all of them angular also provides one very great concept and that is called as form builder you can use the form builder to design your form and you do not have to use this new keyword so many times let's understand how to use that form builder to use the formula we have to inject it over here in the constructor so here i am writing form builder and the type is form builder this form builder is available inside this angular and the forms and basically it is a part of reactive forms so if you are importing the reactive modules in your application then this phone builder will always be there you do not have to do anything else let's remove this abstract control it is not being used there we are okay so now with the help of this form builder i can design my form so over here you will see that you are having this new form group now i can just remove it and what i can write this dot form builder dot here you will see there are three things first is array second is control and third is group we don't know anything about array as of now so let's ignore it the control is used to add a control and this group is used for the form group so basically here we have to work with the form group like this now there are so many things let's start with the basic one if you are using the form builder then you do not have to add anything over here let me do it quickly so again we are having this firm group so here i can write this dot form builder dot group and in the currency let's just remove it now you can see the initialization of this form is looking very good we are only having this form builder and we are even injecting it in the constructor so we are not using the new keyword anywhere we can simply use all the properties and just define the values okay let's see how it is working now go to the browser and here is the application by default you will see we do not have anything because because we are not setting any default value and here at the bottom side you will see what data we have in the form if i will update something in the title let's say this is title let's see what we have here immediately you will see that this is working fine if you will click on the save button then it will just save the value in the service okay this is how you can work with the form builder and this is applicable for the root level child level and anywhere now let's say you want to set the default values so you can directly pass it over here in the title this is default save it go back to the browser here you will see in the title property we are having this value this is default this is how you can set the default value let's assume that i want to use the validations also along with this default value then i can use this square bracket and as a first parameter i can pass the value and then i can pass the validations so let's say it is validator dot required that's it now you will notice that this title will be required here it is here we are having this star symbol it means it is required now let's say i want to add more than one validation then again we are having that same approach just cut it use one more square bracket and here you can pass all the validations as per your choice like this and you will see that it is working fine now whatever concepts we have covered so far in this reactive form like the set value patch value and getting the instance of a particular form control all of them are applicable in this form builder as well we are just designing the form over here rest all the concepts are same just like you are working with that new form control [Music]

Channel: WebGentle

Views: 6,561

Keywords: How to use formbuilder in angular reactive forms, formbuilder in angular reactive forms, formbuilder in angular, use formbuilder in angular, angular tutorial, reactive forms in angular, angular tutorial for beginners, best angular tutorial, best angular tutorial for beginners, beginner angular tutorial, angular, angular tutorial webgentle, angular tutorial course, angular tutorial complete, complete angular tutorial, webgentle angular tutorial, Angular course

Id: -XomzX7VSCQ

Length: 4min 37sec (277 seconds)

Published: Sun Sep 25 2022