Advanced Error Handing in @angular Forms

Part 1

Published in

Fundamental Library

3 min readNov 11, 2022

In this article, I will be explaining how the @fundamental-ngx Form Container component works, and how it automatically generates form controls and handles control errors.

Form Container 📦

A while ago @fundamental-ngx team developed the Form Container component to simplify the form generation routine for the developers.

It is based on the declarative approach, which means that developers need to pass the necessary markup, and the component will generate data based on that.

Here’s a simple form container with the Textarea control:

Quick explanation of what is going on there:

We pass an empty FormGroup instance to the fdp-form-group component so it would bound to it, and create an inner form element;
Then we use fdp-form-field with the necessary control configuration;
fdp-form-field automatically generates configured AbstractControl and adds it to the Form Container’s form;
Then we assign this AbstractControl to our form control component. In our case, fdp-textarea.

Seems pretty straightforward so far. Let’s move to the error-handling part.

Error handling ❌

Form Container component allows developers to define different types of error handlers by placing *fdpFormFieldError directive inside the Form Container component, or per each form field component:

By using this approach we can simplify the error definition process. Developers can define all error types in one place without the need for repetition, and use field-specific error texts if needed per field.

*fdpFormFieldError directive can include two child directives *fdpFormFieldErrorHeading and *fdpFormFieldErrorDescription to split error message into heading and description for better user experience.

Developers can define error severity, e.g. ❌ critical, ⚠️ warning, ℹ️ info, and define to which specific error this directive belongs.

They also support passing the error model to the template, thus your favorite IDE will understand the context of the error and provide you with a nice autocomplete feature.

Displaying errors 👀

Now, that we know how to define a specific error message for a specific error, let’s figure out when to display this message.

In @fundamental-ngx we are triggering an error message to display on form submission, or when a specific control has been touched.

Every form control component is based on a base control class, thus having generic business logic behind collecting and rendering errors:

We are using ngDoCheck hook simply because errors can be set outside the component’s context, thus we ensure the error message is rendered in the shortest time possible.

Demo

To see how it works in action, follow this Stackblitz example:

Fundamental-NGX Example - StackBlitz

Generated for you by fundamental-ngx team

stackblitz.com

Conclusion

In this post, I introduce the @fundamental-ngx Form Container component and its usage. The Form Container has the advantage of automatically generating the form controls and handling control errors. It allows the developer to define error severity and directive, in a simplified way and short time. It is my hope that everyone reading this post finds it helpful. Stay tuned for part 2 where I will demonstrate grouping errors for complex forms.