Using reactive forms

Now, we will use the Clarity components' wizard so that we can add/edit products. Wizards are used when we want to create a step-by-step workflow. You can find out more at https://clarity.design/documentation/wizards.

The following image shows the wizard's basic layout:

As you can see from the preceding screenshot, Clarity's wizard has steps described on the left, while the contents of the selected step are shown on the right. We will use this to enter product details. In step 1, we will let the user select the device type; in step 2, we will gather basic information; and in step 3, we will get the expiration information.

First, let's add ReactiveFormsModule to our AppModule so that we can use reactive forms:

...
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    ...
    imports: [
        BrowserModule,
  ...