How to get Form Data in Angular 2

Question

I have a form in my angular 2 Project.

I know how to Retrieve data from the API. But don't know how to Perform a CRUD operation in there.

Can anybody help me with the simple codes on How to Send form data in JSON format to a Web Service in PHP/Any other Language...

Answer 1

In Angular 2+ we handle forms two ways:

• Template-driven
• Reactive

Here I am sharing code for simple template-driven forms. If you want to do it using reactive forms then check this link: Angular2 reactive form confirm equality of values

Your module file should have these:

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) 

Simple registration html file:

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

Now your registration.ts file should be like this:

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

To handle this data on server side use this link: How to post json object with Http.post (Angular 2) (php server side). I think this is more than sufficient.