用于创建和编辑数据的相同模板驱动表单 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>

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

Same template driven form for creating and editing data Angular4 example

angular5

angular4-forms

反应形式