web-dev-qa-db-ja.com

Angular 2でフォームデータを取得する方法

angular 2プロジェクトにフォームがあります。

APIからデータを取得する方法を知っています。しかし、そこでCRUD操作を実行する方法がわかりません。

PHP/Any other LanguageのWebサービスにJSON形式のフォームデータを送信する方法に関する簡単なコードで誰でも助けてくれますか...

angularangular2-formsangular2-services
20
Deepak swain

Angular 2+では、フォームを2つの方法で処理します。

  • テンプレート駆動
  • リアクティブ

ここでは、単純なテンプレート駆動型フォームのコードを共有しています。リアクティブフォームを使用してそれを行う場合は、次のリンクを確認してください： Angular2リアクティブフォームは値が等しいことを確認します

モジュールファイルには次のものが必要です。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MyApp } from './components'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}

platformBrowserDynamic().bootstrapModule(MyAppModule)

単純な登録HTMLファイル：

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

これで、registration.tsファイルは次のようになります。

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'register-form',
  templateUrl: 'app/register-form.component.html',
})
export class RegisterForm {
  registerUser(form: NgForm) {
    console.log(form.value);
    // {email: '...', password: '...'}
    // ... <-- now use JSON.stringify() to convert form values to json.
  }
}

サーバー側でこのデータを処理するには、次のリンクを使用します： Http.post（Angular 2）でjsonオブジェクトを投稿する方法（phpサーバー側） これで十分だと思います。

34
Amit kumar