2016-12-17 1 views
13

У меня есть форма в моем угловом проекте 2.Как получить данные формы в Угловом 2

Я знаю, как извлекать данные из API. Но не знаю, как выполнить операцию CRUD.

Может кто-нибудь помочь мне с простыми кодами на Как отправить данные формы в формате JSON для веб-службы в PHP/любой другой язык ...

Помощь будут оценены. Благодаря

+0

проверить эту ссылку ... http://stackoverflow.com/questions/41154319/how-to-post-json-object-with-http-post-angular-2-php-server-side –

+0

@AmitSuhag, Я хочу знать, как связать данные формы с помощью события click и onSubmit. И тогда, как это сделать. Можете ли вы мне помочь со всем пакетным решением ... Это будет очень полезно для меня ... –

ответ

22

В угловом 2+ мы обрабатываем образует два способа:

  • Шаблона с приводом
  • Реактивной

Здесь я делюсь кодом для простых форм на основе шаблонов. Если вы хотите сделать это с помощью реактивных форм затем проверить эту ссылку: Angular2 reactive form confirm equality of values

Ваш файл модуля должен иметь следующие:

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. 
    } 
} 

Для обработки этих данных на стороне сервера используйте эту ссылку: How to post json object with Http.post (Angular 2) (php server side). Я думаю, что этого более чем достаточно.

+0

Awesome! Большое спасибо за помощь в этом –