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

Question

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

Answer 1

反应形式

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