Angular 2 – 用于创建和编辑的单个表单组件
我正在寻找一些好的建议/最佳实践来重用我的表单组件.
数据模型: class Contact { id?: String; name: String; } >当创建一个新的联系人时,当然没有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是不可变的) 你知道如何解决这个问题吗? 解决方法
创建一个@ViewChild(“form”)表单:ContactForm; 在这种情况下,我不会写2个不同的组件.只需检查当前表单是否正在创建或编辑.所以我会保持相同的形式,按下Save按钮后,Create Form将成为Edit Form. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |