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

Question

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

数据模型：

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

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

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

行为：

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

但两个视图必须有不同的操作。例如。编辑视图必须具有删除和重新加载按钮，当然两个视图的保存按钮的行为必须不同（创建发出POST请求，编辑发出PATCH请求。

我尝试了什么/问题：

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

ContactFormComponent包含<form [formGroup]="form">和<input formControlName="name">标记。

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

思想/想法：

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

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

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

Answer 1

  

现在我无法弄清楚如何将表格数据拉出来   单击“保存”按钮时的ContactFormComponent。

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

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