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

Question

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

数据模型:

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

• 当创建一个新的Contact当然没有id ，这就是为什么它在模型中是可选的。

• 当编辑一个Contact有一个id ，但它不可编辑，因此它不是表单的一部分。

行为:

编辑和创建 View 应该使用相同的表单 @Component ，因为可用字段相同，验证约束也相同。

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

我尝试过的/遇到的问题:

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

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

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

想法/想法:

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

(我不想在 @Input 属性上使用双向绑定(bind)，因为 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") 表单:ContactForm;然后你可以调用 form.contact 来获取编辑联系人。

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