node.js - Angular2 Formbuilder Show submitted data for editing purpose -

i have simple form takes user input , posts database.

the form follows

import {component, oninit} 'angular2/core'; import {router_directives} "angular2/router"; import {homecomponent} "../home/homecomponent"; import {formbuilder, validators, controlgroup} "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 dash</a>      `,     directives : [router_directives] })  export class profilecomponent implements oninit {     myform: controlgroup;      constructor(private fb: formbuilder) { }       onsubmit(form){        console.log(this.myform);        //post rest api     }      ngoninit():any {       this.myform = this.fb.group({        'name': ['', validators.required],      });     } }     

how can show submitted data editing purpose in same component. idea allow user edit data after submission , resubmit if required.

there's couple different steps this, think:

1. populate form existing data
2. submit same record in backend.

how populate form depend on how component loaded. if you're loading router, i'd recommend using record id fetch data, populate form, , you're off races:

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],   }); } 

from there, convention submit edits using http put request, since updates existing record should idempotent (creating new records should post).

onsubmit(form) {   if( this.data ) {     // edit, submit put id   } else {     // didn't have initial data, create new record post   } } 

if you're not loading component via route, need pass existing data it. either use service or @input() field.

if want user able edit data directly after submitting, don't have special. submit method can leave data in form after sending backend. need backend send record's id in response initial post, make submit method send put request id on subsequent submits.

there's more 1 way skin cat, gives ideas.