NgModel在Angular 2

Question

我试图弄清楚如何为具有动态字段的模型重用相同的组件/表单。

后台：我有一个会创建新记录的表单，根据记录类型，表单会有不同的字段，我试图重用create.component.ts和发布不同数据的方法相同。

我的表单如下：

<div *ngIf="activeType === 'type1'">

  <input class="input-field" type="text"
         [(ngModel)]="externalSubscription.firstName" placeholder="Enter first name">
  <input class="input-field" type="text"
         [(ngModel)]="externalSubscription.lastName" placeholder="Enter last name">
</div>

<div *ngIf="activeType === 'type2'">
  <input class="input-field" type="text"
         [(ngModel)]="externalSubscription.userName" placeholder="Enter User Name">
  <input class="input-field" type="text"
         [(ngModel)]="externalSubscription.userId" placeholder="Enter User Id">
</div>

如您所见，类型1和类型2具有完全不同的字段，但我尝试使用externalSubscription模型来绑定此数据。

对于第一种表单 - 我想将externalSubscription初始化为：

externalSubscription = new ExternalSubscriptionType1(firstName, lastName);

以及第二次：

externalSubscription = new ExternalSubscriptionType1(userName, userId);

对于这样的案件，是否有良好的做法？ 或者我应该将这些表单完全划分为使用不同类的不同组件？

他们最后都使用相同的POST端点。