Angular 2 – 用于创建和编辑的单个表单组件

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

数据模型：

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

>当创建一个新的联系人时,当然没有id,这就是为什么它在模型中是可选的.
>编辑联系人时有一个id,但它不可编辑,因此它不是表单的一部分.

行为：

“编辑”和“创建”视图应使用相同的Form @Component,因为可用字段相同,验证约束也相同.

但两种观点必须有不同的行动.例如. Edit视图必须具有Delete and Reload按钮,当然两个视图的Save按钮的行为必须不同(Create发出POST请求,Edit发出PATCH请求).

我尝试了什么/问题：

我创建了一个ContactCreateComponent和一个ContactEditComponent,它们都有< contactForm [contact] =“contact”>< / contactForm>在他们的模板中.因为两个视图必须有不同的按钮和动作,所以我确实将Buttons放在Create和Edit Components中.

ContactFormComponent具有< form [formGroup] =“form”>和< input formControlName =“name”>标签.

现在,当单击“保存”按钮时,我无法弄清楚如何从ContactFormComponent中提取表单数据.

思想/想法：

我可以在Create和Edit Components中定义FormGroup,然后通过@Input将FormGroup实例传递给Form Component.这样我就可以读取/更新/重置表单数据.但后来我不得不两次编写整个FormGroup定义和验证器,但在我看来,这应该保留在Form Component中.

(我不想在@Input属性上使用双向绑定,因为Contact是不可变的)

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

解决方法

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.