0% found this document useful (0 votes)

27 views

Pocket - How To Create A Complex Form in Angular

This document discusses how to create a complex form in Angular by building reusable form components, dynamically updating validators, and persisting form data with state management. It recommends using reactive forms over template-driven forms for scalability. Key steps include creating reusable components with ControlValueAccessor, dynamically setting validators based on form values, and integrating the form with NGXS state management to persist data on navigation or refresh.

Uploaded by

vteial

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

27 views

Pocket - How To Create A Complex Form in Angular

Uploaded by

vteial

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

How to Create a Complex Form in

Angular?
By Emily Xiong • medium.com • 6 min

View Original

Problem I got: form handling is deﬁnitely a diﬃcult task in Angular,

or in any front-end frameworks. There are limitless interactions
users could do with a form. I need to validate, show errors, and keep
track of form status.

This blog will go through steps to create a pretty complex checkout

form in Angular: https://xiongemi.github.io/angular-form-ngxs .
Sample checkout form

Github repo: https://github.com/xiongemi/angular-form-ngxs .

This blog will show my solution to these problems:

How to create a reusable form component

How to setup dynamic validation on form control
How to persist form values (using state management with
NGXS)

Before We Start
HTML Form
We don’t need to re-invite the wheels, we are still using HTML form.
Here are some things to we could use:

Specify the input type

(https://www.w3schools.com/html/html_form_input_types
.asp ) when possible to control the field value type. By
specifying the input type, on the mobile browser,
appropriate virtual keyboard would popup. It will also limit
user input to our desired type.
Specify the button type (reset, submit)
(https://www.w3schools.com/tags/att_button_type.asp )
when possible.
We could use minlength and maxlengthto add
validations on the input.
Optional: we could use name or autocomplete to input
field to enable autofill. In this checkout form example, I
followed instructions
https://developers.google.com/web/updates/2015/06/check
out-faster-with-autofill to add autofill.

Reactive or Template-Drive Form?

Always use REACTIVE form. As stated in
https://angular.io/guide/forms-overview:

Reactive forms are more robust: they’re more scalable,

reusable, and testable.

With reactive form, it would be easier to track the form status and
integrate with NGXS.

Create a Reusable Form Component

In my form, I got a address form used in 2 places: shipping address
and billing address.
2 address forms

To create a reusable address form component, I have to implement

ControlValueAccessor to the address form and just to emit one
value at onChange:

Use ControlValueAccessor to create the address form

Note: When click submit, the ControlValueAccessor does not have
way to listen to touched change event (Git issue:
https://github.com/angular/angular/issues/10887 ). I need to add a
touched input to the component.

In the parent component where I want to use address form, I simple

use the address form like a regular input:

<afn-address-form formControlName="billingAddress" [touched]="del

Dynamic Validation
For example, I got this “My shipping address is same as my billing
address” checkbox. Whether this checkbox got check would aﬀect
the validation on the shipping address.

When this checkbox is checked, shipping address is hidden and not

required. However, when it is checked, shipping address would
show up and it would be required.

Checked
Unchecked

I also got a radio group for users to choose whether they want to
checkout as a guest or create a account.

“Create Account” Selected

“Checkout as a Guest” Selected

I could not just passed in the validation to shipping address form

control since it is not static. Shipping address is not required all the
time:

shippingAddress: [null, Validators.required],

There are 2 options:

1. Subscribe on the value changes and

manually set and clear validators
In below code snippet, I subscribe to isShippingSame checkbox
value changes and set and clear validators for shippingAdress
ﬁelds accordingly.

Subscribe on the value changes and manually set and clear validators

In this example, I only got a couple of ﬁelds that need to update

validators. However, if there are more ﬁelds need to update
validators, this form component will soon become very large and
hard to test.

2. Use parent form group’s validator

In below code spinet, I have a function
deliveryPageFromValueValidator that reads the entire
form value and set the errors on the form group level.
If I need to show error for each ﬁeld, I still need to update form
ﬁeld’s errorStateMatcher since the error is no longer with
form control, but its parent form group.

To do so, I have create below FormGroupErrorStateMatcher

class. It will check whether or not its parent form group has the
errors got passed in.

FormGroupErrorStateMatcher class

In the component, I have create the errorStateMatcher for

password and conﬁrm password ﬁelds.

passwordErrorStateMatcher = new FormGroupErrorStateMatcher([‘pass

In the html, I assign above variable to errorStateMatcher for

those inputs:

So if user try to submit the invalid form, it will highlight all the ﬁelds
with errors:
Invalid form got submitted

In this approach, the validation logic is no longer inside the

component ﬁle, so it would be easier to unit test.

In short,

approach 1: less bolierplate, hard to unit test, I would use it

when I got just a couple form controls need to change
validators.
approach 2: more boilerplate, easy to unit test, I would use
it when I got more form controls that need to change
validators.

Persist Form Values

In this example, I persist already entered form values when user
refresh the page or navigate forward and back. The archive this, I
need to integrate state management with the form.

Install NXGS Libraries

I choose NGXS as my state management library and it is pretty easy
to do with its plugins @ngxs/form-plugin and @ngxs/storage-
plugin . However, you are free to work it with any state management
library out there.

I also install @ngxs/logger-plugin and @ngxs/devtools-plugin for

logging and debugging.

So I run below command to install libraries:

npm install @ngxs/form-plugin @ngxs/logger-plugin @ngxs/storage-p

npm install @ngxs/devtools-plugin --save-dev

In app.module.ts, inside the imports array, I got:

In my lazily-loaded form.module.ts, inside the imports array, I

include:

NgxsModule.forFeature([FormsState]), NgxsFormPluginModule
Integrate with NGXS
Integrate with NGXS is pretty straightforward,

I only need to add ngxsFrom in html:

<form [formGroup]="deliveryPageForm" ngxsForm="forms.deliveryForm

I have created an interface ﬁle for one form state:

I create a const variable for the default form state:

In this example, I got a few forms, so the default state for my forms
module is:

Then create form.state is pretty simple:

I just to need to assign the initFormsStateModel to the

defaults and that is it.

Now I got form values in the state, when I navigate back to a page,
already entered form value will persist.

Also, in the app.module.ts, since I add

NgxsStoragePluginModule.forRoot({ key:
[‘forms’] }), it would put entire forms state into storage. Now
if I refresh the page, the entered form values would will be there.

Clear State
Once the form is submitted, I need to clear the entire form state. To
do so, use the library ngxs-reset-plugin , so I only need to dispatch
an action:

this.store.dispatch(new StateReset(FormsState));

Summary
Above are some challenges I ran into when I create to create a
complex form and how I solve those challenges. Of course there are
deﬁnitely other ways to work around it.