Reactive Form Value Accessor — Angular

Hello awesome people, Hope you are doing great. In this story, we are going to cover how we can access values of reactive form which has nested controls.

Just to give a gist about what reactive form is let me give you an official definition of the same — Reactive forms provides a model-driven approach to handling form inputs whose values change over time.

Okay so consider I have a reactive form that follows the below structure.

As we can see I have a validator on username control and now I want to add validation on UI with respect to it.

And for that suppose I want to access the errors object of username control.

Now to access that errors object. We can write,

this.SignupForm.controls['userData'].get('username')?.errors

But now say suppose I have multiple validators and I want to access any particular validator from that errors object.

So for our case, how you will try to access the key in the object?

FormGroup Object

Maybe you will try something like this …

this.SignupForm.controls['userData'].get('username')?.errors['required']

You are right but it depends on where you are accessing it and to whom you are assigning it.

For e.g. you can access it in a template or ts file and you can utilize it directly with the *ngIf directive or it may happen that you are assigning it to an input directive.

In case you get an object not defined or null type of error, then you can access it like,

this.SignupForm.controls['userData'].get('username')?.errors?.['required']

And this probably can resolve your issue, as it makes the required key optional.

Ts Logic

Console Output

Conclusion

We saw how we can access values from FORMGROUP object. Hope you extracted some knowledge from it. In case of any doubt or if you just want to say Hi! feel free to reach me on LinkedIn or GitHub.

If you like the blog make sure to take a look at my YouTube channel for more amazing stuff.