用于创建和编辑数据的相同模板驱动表单Angular4示例

时间:2018-08-19 06:45:01

标签: angular5 angular4-forms

我想用现有的对象值编辑表单。我不能做,因为我不知道该怎么做?我尝试了不同技术的双向数据绑定,但未找到任何解决方案

1 个答案:

答案 0 :(得分:0)

反应形式

您可以使用反应形式。 首先,将FormsReactive 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>