This is a quick example of how to build a dynamic form with validation in Angular 10 using Reactive Forms. The example form allows selecting the number of tickets to purchase and then entering the name and email of the person each ticket is for, both fields are required and the email field must contain a valid email address.

I’ve setup the form to validate on submit instead of on field change, this is implemented with a submitted property in the app component that is set to true when the form is submitted for the first time, and reset to false if the reset or clear button is clicked.

The “Buy Tickets” button simply displays the form values in an alert popup if the form is valid. The “Reset” button resets the form back to it’s initial state including the removal of all ticket name & email fields. The “Clear” button clears the values of ticket name & email fields but leaves the number of tickets selected.

#angular #angular 10