http - How to send form data to the server api with angular 2?

Question

I'm trying to post data from a small registration form to the server

I've been stuck in this since three days now i don't know how to do it, i'm still beginner in Angular 2, I need some guidance in how to post this data: my html:

<form>
  <div class="row col-md-12">
<input (keyup.enter) = "userName(name)" #name type="text" 
class="rounded-inputs25 col-md-3 first-name-input add-account-inputs" 
placeholder="First name" >
<input type="text" class="rounded-inputs25 col-md-3 last-name-input 
add-account-inputs" placeholder="Last name" >
  </div>
<input type="email" class="rounded-inputs25 col-md-6 add-account-
inputs" placeholder="Email" >
<input type="password" class="rounded-inputs25 col-md-6 add-account-
inputs" id="password" placeholder="Password" >
<input type="password" class="rounded-inputs25 col-md-6 add-account-
inputs" id="confirm_password" placeholder="Confirm password" >
  </form>

My component ts:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {Http} from '@angular/http';
declare const $;

@Component({
selector: 'app-add-account',
templateUrl: './add-account.component.html',
styleUrls: ['./add-account.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AddAccountComponent implements OnInit {
name: any[];
password: any[];
email: any[];
userNames: any[];
private url = 'i deleted it because it belongs to the company api';

constructor(private http: Http) {
}

userName(input: HTMLInputElement) {
let user = {name: input.value};
input.value = '';
this.http.post(this.url, JSON.stringify(user))
  .subscribe(response => {
    user['id'] = response.json().id;
    this.user.push(name);
    console.log(response.json());
  });
} }

As you can see, I tried to post username only just to test but it didn't work and I know something is wrong or missing but I don't know what it is. Also I want to know what if I'm trying to post more than one data, like username and email, how to write it.

If you have any demos or live examples send it, if you need any more data or anything that I didn't write just ask.

Answer 1

This is how you do it. stackblitz

The component

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import {HttpClient,HttpErrorResponse} from '@angular/common/http';
declare const $;

@Component({
  selector: 'app-add-account',
  templateUrl: './add-account.component.html',
  //styleUrls: ['./add-account.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AddAccountComponent implements OnInit {
  name: any[];
  password: any[];
  email: any[];
  userNames: any[];
  private url = 'https://jsonplaceholder.typicode.com/posts';

    constructor(private http: HttpClient) {
    }

    ngOnInit(){


    }
    // userName(input: HTMLInputElement) {
    //   let user = {name: input.value};
    //   debugger;
    //   //input.value = '';
    //   this.http.post(this.url, JSON.stringify(user))
    //     .subscribe(response => {
    //       alert(response);
    //     },(err: HttpErrorResponse) => {
    //       alert(err);
    //   });
    // }

    onSubmit(form: NgForm){
      var data = form.value;
      debugger;
      var myPostObject = {
        firstName:data.firstname,
        lastName:data.lastname,
        email:data.email,
        passWord:data.password,
      }
      this.http.post(this.url, myPostObject)
        .subscribe(response => {
          debugger;
          console.log(response);
        },(err: HttpErrorResponse) => {
          console.log(err);
      });
    }
}

The HTML

<form #registerForm="ngForm" >
  <div class="row col-md-12">
<input  name="firstname" ngModel #firstname="ngModel" type="text" 
class="rounded-inputs25 col-md-3 first-name-input add-account-inputs" 
placeholder="First name" >
<input type="text" name="lastname" ngModel #lastname="ngModel" class="rounded-inputs25 col-md-3 last-name-input 
add-account-inputs" placeholder="Last name" >
  </div>
<input type="email" name="email" ngModel #email="ngModel" class="rounded-inputs25 col-md-6 add-account-
inputs" placeholder="Email" >
<input type="password" name="password" ngModel #password="ngModel" class="rounded-inputs25 col-md-6 add-account-
inputs" id="password" placeholder="Password" >
<input type="password" (keyup.enter)="onSubmit(registerForm)"  class="rounded-inputs25 col-md-6 add-account-
inputs" id="confirm_password" placeholder="Confirm password" >
  </form>