3

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.

Improve this question
21
  • can u send the API's expected type.? Commented Jan 23, 2018 at 10:30
  • Which version of angular are you using? What is the error that is displayed? Did you provide Http in your module.ts? Commented Jan 23, 2018 at 10:33
  • It's a post type api, is this is what you meant? Commented Jan 23, 2018 at 10:33
  • 1
    i mean you data json schema. Thanks btw, try importing import { HttpClient, HttpErrorResponse } from '@angular/common/http'; and use that in the constructor as private property http. Import HttpClientModule in App.module.ts Commented Jan 23, 2018 at 10:34
  • @YounesM I'm using angular 4, yes i provided http you can see it in the first lines of my ts, this is the error on the console appears when i press enter: Commented Jan 23, 2018 at 10:35

2 Answers 2

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

17 Comments

It's working on stack blitz but when i run it on my project it directs me to the debugger when i press enter to submit, im very thankful for you because you're wasting time to help me but can you please guide me through the final step, how can i make it work with my api key on my project? what could be missing?
do u have an key for that api that u need to pass?
this is the public api key easyschools.org/crm/crm/public/api/en/schools/create/step5
did u try calling that with required posyObject without json stringify?
i just put the link instead of the link you used
|
0

Why not using reactive forms from Angular? What you are doing seems a lot complicated for no reason.

Please read: Angular Reactive Forms. That should give you enough information on how to work with forms.

Once you define form controls you can subscribe to valueChanges and react accordingly, while still having access to form (and control) values.

Improve this answer

4 Comments

will i be able to post it to the server?
i saw the topic and the live example but i dont know if this will make me able to post it to the server
Http service is the one making you able to post to server. And yes, it does help you post to server.
Also, please use Angular 4/5 and HttpClient, unless you need XSRF over cross domain. HttpClient is easier and cleaner than the old (and deprecated) Http.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.