用于创建和编辑data Angular4示例的相同模板驱动表单
用于创建和编辑data Angular4示例的相同模板驱动表单
提问于 2018-08-19 14:45:01
我想用现有的对象值编辑表单。我不能做是因为我不知道该怎么做？我尝试了不同的技术双向数据绑定，但我没有找到任何解决方案
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-19 14:57:46
反应式形式
您可以使用反应式表单。首先，将Forms和Reactive Forms导入您的app.module.ts
imports: [
...
FormsModule,
ReactiveFormsModule,
...
]然后在您的组件中，像这样使用FormBuilder：
constructor(private fb: FormBuilder){
this.initForm(firstname, lastName);
}
myForm: FormGroup;
initForm(firstname, lastName) {
this.myForm = this.fb.group({
first_name: [firstname, Validators.required],
last_name: [lastName, Validators.required],
nick_name: [null, Validators.required]
});
}然后在您的模板中：
<form [formGroup]="myForm">
<input type="text" formControlName='first_name' />
<input type="text" formControlName='last_name' />
<input type="text" formControlName='nick_name' />
</form>这里有一个有用的提示，就是打印您的表单值以查看它们的更改:为了进行调试，请将以下内容添加到模板中：
<pre>{{myForm.value | json}}</pre>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51915207
复制相关文章
相似问题
腾讯云开发者
