Question

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

在这种情况下，以6号反应式（可能是动态的）形式的惯用方式是什么？

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

方法nr 1应该可以正常工作，尽管每种情况的一半字段都不同，这会引发一个问题-为每种情况选择两种不同的形式（绑定不同的模型）会更好（方法2）？

Answer 1

如果您的私人和公司字段完全不同-可以使用两种不同的形式，但是如果您具有类似的字段，例如电话，地址，电子邮件等等-比使用一种表单并动态隐藏/显示不同的字段更合适

Answer 2

对于这个问题，没有正确的方法，而是最佳的方法。这将使用两种不同的形式。更好的是，将其制成两个独立的组件，并使用ngSwitch来确定使用哪个组件将父组件与处理每个组件之间的差异的责任区分开来。

使用这种方法的积极方面是它们是不同的，因此，更容易分别处理它们。

类似这样的东西：

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

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

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

3 个答案: