Complex Reactive form validations

Question

I'm trying to find a better approach to handle complex angular forms. The form has many cascading dropdowns, and I need to find an approach to reduce complexity.

Below Validations I'm trying to achieve:

1. Based on the brand selected, I want to populate the related models and based on selected i want to populate Model types (Maker and Dealer sides).
2. Based on user selected of the brand in Dealer side i should update the (Brand Maker) dropdown in top left e.g. if user selects AUDI in Dealer then the Brand Maker dropdown should be updated with which expected values BWM and Audi.
3. There should be validation in Registration ID as user types and leave the field, e.g. user input is 12345657 an API will be called to check for existing Registration ID, if exisits it will prefill and lock the fields in Maker Side.
4. If the user types certain Registration ID in Dealer side same api check shall be called and if the existing ID is returned, the fields will be prefilled and locked.
5. in the Maker side chosen Model e.g. M3 make type and description values will be fetched from API and locked.
6. If the chosen Model is M3 user input in Registration ID is validated via API e.g. user input is 15377347 if this is not in the system it shall disable the form submission.
7. Both Maker and Dealer validations are interchangeble meaning if user login as AUDI the maker is Audi and Dealer is BMW and same validations when user has when login as BMW maker shall be valid in Dealer side. can you please elaborate what's the approach given the validations above,will be grateful if answers point to a tutorial or a stackblitz demo.

Answer 1

The first two are not validations, they are actions you need to take upon an event happening, namely a change of selected value in your drop-downs. So you need to have something like:

<select (change)="onChange1()" formControlName="yourDealerDD1">
   <option *ngFor="..." [ngValue]="record.id">{{record.name}}</option>
</select>

<select formControlName="yourMakerDD1">
   <option *ngFor="for brand of makerBrands" [ngValue]="brand.id">{{brand.displayName}}</option>
</select>

where onChange1() is a function that will be called when you change value on your drop-down named as yourDealerDD1 in your reactive form. In that function, you can filter and set the makerBrands, so that yourMakerDD1 drop-down displays the appropriate options.

I cannot answer all your queries, but if I were you, I would start by reading about the following:

1. Creating custom validator for reactive form controls
2. Listening to changes with valueChanges
3. Disabling controls from code
4. Differences between pristine, dirty, touched states and in general about a control's state (valid, invalid, dirty, touched, pristine, visited, etc)