Angular 2 - 用于创建和编辑的单一表单组件

Question

我正在寻找一些好的建议/最佳实践来重用我的表单组件。

数据模型：

class Contact {
  id?: String;
  name: String;
}

当创建一个新的Contact时，当然没有id，那是为什么它在模型中是可选的。
当编辑一个Contact时，有一个id，但它不可编辑，因此它不是表单的一部分。

行为：

Edit 和 Create 视图应使用相同的表单 @Component，因为可用字段相同，验证约束也相同。

但是两个视图必须有不同的操作。例如。 Edit 视图必须有一个 Delete 和 Reload 按钮，当然两个视图的 Save 按钮的行为必须不同（Create 发出 POST 请求，Edit 发出 PATCH 请求）。

我尝试了什么/问题：

我创建了一个 ContactCreateComponent 和一个 ContactEditComponent，它们的模板中都有 <contactForm [contact]="contact"></contactForm>。因为两个视图必须有不同的按钮和操作，所以我确实将按钮放在了创建和编辑组件中。

ContactFormComponent 有 <form [formGroup]="form"> 和 <input formControlName="name"> 标签。

现在我不知道如何在单击“保存”按钮时从 ContactFormComponent 中提取表单数据。

想法/想法：

我可以在创建和编辑组件中定义 FormGroup，然后通过 @Input 将 FormGroup 实例传递给表单组件。这样我就可以读取/更新/重置表单数据。但是后来我不得不将整个 FormGroup 定义和验证器写了两次，尽管在我看来这应该保留在表单组件中。

（我不想在 @Input 属性上使用双向绑定，因为 Contact 是不可变的）

你知道如何解决这个问题吗？

Answer 1

Now I can't figure out how to pull the form data out of the ContactFormComponent when the Save Button is clicked.

创建 @ViewChild("form") form: ContactForm; 然后可以拨打form.contact获取编辑联系方式

在这种情况下，我不会编写 2 个不同的组件。只需检查当前表单是否正在创建或编辑。所以我会保持相同的形式，在按下 Save 按钮后，Create Form 无论如何都会变成 Edit Form。

Angular 2 - 用于创建和编辑的单一表单组件

Angular 2 - Single Form Component for Create and Edit

angular2-forms

angular2-template

angular

数据模型：

行为：

我尝试了什么/问题：

想法/想法：