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

Question

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

数据模型:

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

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

• 当编辑一个Contact存在id,但它是不可编辑,因此它不是形式的一部分.

行为:

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

但两种观点必须有不同的行动.例如,"编辑"视图必须具有"删除并重新加载"按钮,当然两个视图的"保存"按钮的行为必须不同("创建"发出POST请求,"编辑发出PATCH请求").

我尝试了什么/问题:

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

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

现在我无法弄清楚如何从ContactFormComponent单击"保存"按钮时拉出表单数据.

思想/想法:

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

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

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

Answer 1

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

创建一个@ViewChild("form") form: ContactForm; 然后您可以致电form.contact获取编辑联系人。

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