复杂的反应式表单验证答案

【问题标题】：Complex Reactive form validations复杂的反应式表单验证
【发布时间】：2021-03-09 19:12:18
【问题描述】：

我正在尝试寻找一种更好的方法来处理复杂的角度形式。该表单有许多级联下拉菜单，我需要找到一种降低复杂性的方法。

低于我试图实现的验证：

根据所选品牌，我想填充相关模型，并根据所选品牌填充模型类型（制造商和经销商双方）。
根据用户在经销商方面选择的品牌，我应该更新左上角的（品牌制造商）下拉菜单，例如如果用户在 Dealer 中选择 AUDI，则 Brand Maker 下拉菜单应更新为 BWM 和 Audi 的预期值。
注册 ID 中应该有验证作为用户类型并离开该字段，例如用户输入是 12345657，将调用 API 来检查现有的注册 ID，如果存在，它将预填充并锁定 Maker Side 中的字段。
如果用户在Dealer端输入了某个Registration ID，同样的api检查会被调用，如果返回现有的ID，字段会被预填并锁定。
在制造商方面选择的模型，例如M3 品牌类型和描述值将从 API 获取并锁定。
如果选择的模型是 M3，则注册 ID 中的用户输入通过 API 进行验证，例如用户输入是 15377347，如果系统中没有，它将禁用表单提交。
如果用户以 AUDI 身份登录，则制造商和经销商验证是可互换的，制造商是奥迪，经销商是宝马，并且当用户以宝马制造商身份登录时，相同的验证在经销商端有效。您能否详细说明上述验证的方法是什么，如果答案指向教程或 stackblitz 演示，将不胜感激。

【问题讨论】：

标签： angular angular-reactive-forms formarray

【解决方案1】：

前两个不是验证，它们是您在事件发生时需要采取的操作，即更改下拉列表中的选定值。所以你需要有类似的东西：

<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>

其中onChange1() 是一个函数，当您在响应式表单中更改名为yourDealerDD1 的下拉列表中的值时，将调用该函数。在该函数中，您可以过滤和设置 makerBrands，以便yourMakerDD1 下拉菜单显示相应的选项。

我无法回答你所有的问题，但如果我是你，我会先阅读以下内容：

Creating custom validator for reactive form controls
Listening to changes with valueChanges
Disabling controls from code
Differences between pristine, dirty, touched states 以及一般关于控件的状态（有效、无效、脏、已触摸、原始、已访问等）

【讨论】：