在角度 6 中具有条件形式模型的惯用方式答案

【问题标题】：Idiomatic way to have conditional form model in angular 6在角度 6 中具有条件形式模型的惯用方式
【发布时间】：2018-10-04 19:58:06
【问题描述】：

我有一个用例，我需要有 3 个步骤表单（客户要求），每个步骤调用不同的端点，其中第一个可能有两个不同的模式 - 一个用于私人客户，一个用于公司客户。

在 Angular 6 反应式（可能是动态）形式中处理这种情况的惯用方式是什么？

根据客户类型的选择值，通过条件验证动态显示和隐藏字段。
客户类型选择值确定是呈现私人客户表单还是呈现公司客户表单。

方法 nr 1 应该可以正常工作，尽管每种情况下有一半的字段是不同的，这会导致一个问题 - 每个场景都有两种不同的形式（具有不同的模型界限）不是更好吗（方法2）？

【问题讨论】：

标签： javascript angular angular6

【解决方案1】：

如果您的 private 和 company 字段完全不同 - 可能适合使用 2 种不同的表单，但如果您有类似的字段，例如电话、地址、电子邮件等等 - 比使用一种形式并动态隐藏/显示不同的字段更合适

【讨论】：

是的，尽管验证器的复杂性增加了 - 因为所有这些客户类型的特定字段都是必需的并经过验证。我说的对吗？

【解决方案2】：

对于这个问题没有正确的方法，而是最好的方法。这将使用两种不同的形式。更好的是，让它成为两个独立的组件，并使用ngSwitch 来确定使用哪个来隔离父组件，而不是负责处理每个组件之间的差异。

使用这种方法的好处是它们是不同的，因此分开处理更容易。

类似这样的：

<div [ngSwitch]="customerType">
  <private-form *ngSwitchCase="'private'" [(ngModel)]="customer"></private-form>
  <company-form *ngSwitchCase="'company'" [(ngModel)]="customer"></company-form>
</div>

【讨论】：

【解决方案3】：

从 可读性 的角度来看，选项 2 将是赢家，正如 lenilsondc 在他的回答中所表明的那样。选项 1 将成为 可维护性 的赢家。如果您有共同的字段，那么您将避免并行维护它们。

还可以选择结合两种方法。您可以将公共字段抽象为它们自己的组件，并将它们包含在两个表单组件中。

private-form:

<app-name-field></app-name-field>
<app-email-field></app-email-field>
<private-specific-field></private-specific-field>

company-form:

<app-name-field></app-name-field>
<app-email-field></app-email-field>
<company-specific-field></company-specific-field>

【讨论】：