In reactive forms also, we can do grouping as shown below in example.
With this change in place, when I look at the form, it breaks. 
It makes sense to have this error as we clubbed the Form Group under another one, hence we need to update the path in markup as well.
Here, I have done a simple change, first of all, I have wrapped the same inside one div with formGroupName directive and then updated the path everywhere say employeeData.firstname. With that above change in place, it will display the same output, only difference is, now its wrapped inside separate form group. This kind of isolation is good for big enterprise apps, where forms are complex. Hence, we can decouple the same using grouping.
Now, let’s see how to work with array of form controls. Let’s say here, you would like user to dynamically add form controls. Then in that case, it should be something like.
Here, I have done couple of things, First of all I have again annotated the div with directive say formArrayName and then looped in the controls. Since, we are adding controls dynamically, hence we need to link the same with TypeScript code as well. This is the reason, I have annotated the same with form control.
Another thing is that, I have used property binding here, because I would like to pass the index as control name. Now, my corresponding Typescript code looks like
Here, you can see the intillesense help as well. With the above change in place, when I go ahead and run the app, it will come with default value coding, which you can edit off-course. Since, this is dynamic, hence you can add n number of controls. With the above change in place, when I go ahead and run the app, it will come like
Therefore, here I have added couple of areas and then I submit the form. With that, it gave me below values. 
Now, let’s see how to write custom validators.
Here, I have done couple of things like, first I created a collection of user-names which I like to restrict from being created by user. Then, I have created one function to check user entry. If user entry matches the collection, then it will return error else fine. Then, I called the same under username control. With the above change in place, when I go ahead and check the form, then it will present the following error as shown below.
As you see, I entered super-admin as username and then it flagged error. Here, error message can be improvised but that’s a different case. Now, when you inspect the control, it will display the following insight.
Therefore, here the control is invalid, which also means overall form also becomes invalid. However, when I enter other than these values, then form will become valid. Now, let’s see how to make use of error codes. Here, at this instant, I can still submit the form as there is no check on submit button till now. However, when we see name-value pair of error message what we added in error code object into that particular control.
Now, we can take advantage of these messages or error codes, for showing correct message on screen. Below, I have pasted finished snippet for the same.
With this change in place, when I enter any of the names say admin or super-admin, it will flag below error. 
And if field is empty, then it will show something like, 
Now, let’s create async validators. Below is the finished snippet for the same.
Here, I have done couple of things, first of all you can notice that function is of return type promise or observable which basically accepts anything. Then, I have created one promise with resolve and reject as parameters. Here, in function I just passed rahul@sahay.com as restricted mail. Then, I consumed the same again email formControl. With the above change in place, it will give me following error.
Now, we already know that how to fix this error message. We can utilize the same error code handling here as well. Therefore, I leave this part as an exercise for you. Now, let us look at how to react to changes based on value or status.
Below is the finished snippet for the same.
Here, in ngOnInit(), I have subscribed for these events and just consoling the value. Therefore, If I type anything, then it will print like
However, if any of the form value becomes invalid, then it will flag the state as shown below.
With this I would like to wrap this reactive forms module. I hope, you would have liked this discussion. In coming session, we will delve further, till then stay tuned and happy coding.
Download:- https://github.com/rahulsahay19/Angular-Forms/tree/reactive-forms
Live Demo:- https://rahulsahay19.github.io/Angular-Forms/
Thanks,
Rahul Sahay
Happy Coding