Node.js Angular2 Formbuilder显示提交的数据以供编辑

我有一个简单的表单，它接受用户输入并将其发布到数据库

表格如下：

import {Component, OnInit} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {HomeComponent} from "../home/HomeComponent";
import {FormBuilder, Validators, ControlGroup} from "angular2/common";


@Component({
    selector: 'profile',
    template: `<h1>Profile Page</h1>
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngForm">
    <div>
        <label from="name">Name</label>
        <input [ngFormControl]="myForm.controls['name'] "type="text" id="name" #name="ngForm">
        <span class="validator-error" *ngIf="!name.valid"> required</span>
    </div>
    <button type="submit" [disabled]="!f.valid">submit</button>
    </form>

    <a [routerLink]="['../Dashboard']">Back to Dash</a>

    `,
    directives : [ROUTER_DIRECTIVES]
})

export class ProfileComponent implements OnInit {
    myForm: ControlGroup;

    constructor(private fb: FormBuilder) { }


    onSubmit(form){
       console.log(this.myForm);
       //post to rest API
    }

    ngOnInit():any { 
     this.myForm = this.fb.group({
       'name': ['', Validators.required],
     });
    }
}    

从'angular2/core'导入{Component，OnInit}；
从“angular2/ROUTER”导入{ROUTER_指令}；
从“./home/HomeComponent”导入{HomeComponent}；
从“angular2/common”导入{FormBuilder，Validators，ControlGroup}；
@组成部分({
选择器：“配置文件”，
模板：`个人资料页
名称
必修的
提交
恢复冲刺
`,
指令：[路由器指令]
})
导出类ProfileComponent实现OnInit{
myForm：对照组；
构造函数（私有fb:FormBuilder）{}
提交（表格）{
console.log（this.myForm）；
//post到rest API
}
ngOnInit（）：任何{
this.myForm=this.fb.group({
“名称”：[“”，验证程序。必需]，
});
}
}    

如何在同一组件中显示提交的数据以进行编辑。

---

其想法是允许用户在提交后编辑数据，并在需要时重新提交

我认为这有两个不同的步骤：

使用现有数据填充表单

提交到后端的同一记录

如何填充表单将取决于组件的加载方式。如果使用路由器加载，我建议使用记录id获取数据，填充表单，然后开始比赛：

routerOnActivate(curr: RouteSegment) {
  let id = curr.getParam('id');
  this.data = this.someDataService.get(id); // return null if id isn't found

  this.myForm = this.fb.group({
    'name': [this.data['name'] || '', Validators.required],
  });
}

从这里开始，约定是使用HTTP PUT请求提交编辑，因为对现有记录的更新应该是幂等的（创建新记录应该是POST）

如果您不是通过路由加载组件，那么您需要一些东西将现有数据传递给它。您可以使用服务或@Input（）字段

如果您只是希望用户能够在提交后直接编辑他们的数据，那么您实际上不需要做任何特殊的事情。提交方法可以在将数据发送到后端后将其保留在表单中。您只需要后端将记录的id发送到其对初始POST的响应中，然后让您的submit方法在随后的提交中通过该id发送PUT请求

---

给这只猫剥皮的方法肯定不止一种，但希望这能给你一些想法。

我认为有几个不同的步骤：

使用现有数据填充表单

提交到后端的同一记录

如何填充表单将取决于组件的加载方式。如果使用路由器加载，我建议使用记录id获取数据，填充表单，然后开始比赛：

routerOnActivate(curr: RouteSegment) {
  let id = curr.getParam('id');
  this.data = this.someDataService.get(id); // return null if id isn't found

  this.myForm = this.fb.group({
    'name': [this.data['name'] || '', Validators.required],
  });
}

从这里开始，约定是使用HTTP PUT请求提交编辑，因为对现有记录的更新应该是幂等的（创建新记录应该是POST）

如果您不是通过路由加载组件，那么您需要一些东西将现有数据传递给它。您可以使用服务或@Input（）字段

如果您只是希望用户能够在提交后直接编辑他们的数据，那么您实际上不需要做任何特殊的事情。提交方法可以在将数据发送到后端后将其保留在表单中。您只需要后端将记录的id发送到其对初始POST的响应中，然后让您的submit方法在随后的提交中通过该id发送PUT请求

给这只猫剥皮的方法肯定不止一种，但希望这能给你一些想法