Идиоматический способ иметь условную форму модели в угловых 6

Question

У меня есть сценарий использования, когда мне нужно иметь форму с 3 шагами (требование клиента), которая вызывает разные конечные точки для каждого шага, где первая может иметь две разные схемы - одну для частного клиента, одну для клиента компании.

Каким идиоматическим образом в угловых 6 реактивных (и, возможно, динамических) формах подходить к такому случаю?

1. Имеются динамически отображаемые и скрытые поля с условной проверкой в ​​зависимости от выбранного значения типа клиента.
2. Значение выбора типа клиента определяет, будет ли отображаться форма частного клиента или форма клиента компании.

Подход № 1 должен работать просто отлично, хотя половина полей отличаетсядля каждого случая, и это приводит к вопросу - не лучше ли иметь две разные формы (с разными границами модели) для каждого сценария (подход 2)?

Answer 1

Нет правильного подхода к этой проблеме, скорее, лучший подход.Который будет использовать две разные формы.Более того, сделайте его двумя разделенными компонентами и используйте ngSwitch, чтобы определить, какой из них следует изолировать родительский компонент от ответственности за различие между каждым из них.

Положительная сторонаиспользование этого подхода заключается в том, что они различны, поэтому с ними легче иметь дело отдельно.

Примерно так:

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

Answer 2

Вариант 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>

Answer 3

, если у вас есть абсолютно разные поля для private и company - может быть целесообразно использовать 2 разные формы, но если у вас есть похожие поля, такие как телефон, адрес, адрес электронной почты и т. Д. -чем удобнее использовать одну форму и динамически скрывать / показывать поля, которые отличаются