How to Create a Complex Form in Angular?

Problem I got: form handling is definitely a difficult 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)…