0

ユーザー入力を受け取り、それをデータベースに投稿する単純なフォームがあります。

フォームは次のとおりです。

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

同じコンポーネントで編集目的で送信されたデータを表示するにはどうすればよいですか。アイデアは、ユーザーが送信後にデータを編集し、必要に応じて再送信できるようにすることです。

4

1 に答える 1

3

これにはいくつかの異なるステップがあると思います：

  1. フォームに既存のデータを入力する
  2. バックエンドで同じレコードに送信します。

フォームへの入力方法は、コンポーネントのロード方法によって異なります。ルーターでロードしている場合は、レコード 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 である必要があります)。

onSubmit(form) {
  if( this.data ) {
    // this is an edit, so submit with PUT by id
  } else {
    // didn't have initial data, so create a new record with POST
  }
}

ルート経由でコンポーネントをロードしていない場合は、既存のデータを渡すために何かが必要です。サービスまたは @Input() フィールドのいずれかを使用できます。

送信後にユーザーがデータを直接編集できるようにするだけであれば、特に何もする必要はありません。submit メソッドは、データをバックエンドに送信した後、データをフォームに残すことができます。バックエンドが最初の POST への応答でレコードの ID を送信し、その後の送信時に送信メソッドがその ID で PUT 要求を送信するようにする必要があるだけです。

この猫の皮を剥ぐ方法は間違いなく複数ありますが、いくつかのアイデアが得られることを願っています.

于 2016-05-25T03:40:38.650 に答える