Как получить данные формы в Angular 2

Ответ 1

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

Чтобы обрабатывать эти данные на стороне сервера, используйте эту ссылку: Как разместить объект json с помощью Http.post(Angular 2) (сторона php-сервера). Я думаю, что этого более чем достаточно.

Ответ 2

<form [formGroup]="formData" (ngSubmit)="onSubmit()">
Name<input type="text" formControlName="name"><br><br>
City<select formControlName="city">
    <option value="kkp">KKP</option>
    <option value="MKT">MKT</option>
</select><br><br>

→   

FormData: FormGroup;

constructor() { }

ngOnInit() {
    this.formData = new FormGroup({
        name    : new FormControl(),
        city    : new FormControl()
    });
}
onSubmit(){ 

    console.log(this.formData.value);

}