Send data to the backend API Angular 6

Question

i'm trying to send few form details to the backend API using angular6, but it doesn't work as i expected, and how do i add Observable to this, im expecting to use observable instead of promises.

login.component.html

loginUser(e){

    var username = e.target.elements[0].value;
    var password = e.target.elements[1].value;
    console.log(username,password);

      this.user.setUserLoggedIn()
      var body = "username=" + username + "password=" + password;
      this.http.post("http://localhost:8080/user/all", body).subscribe((data) => {});
       this.router.navigate(['fullpage'])

    return false;
  }

login.component.html

<form id="loginForm" novalidate="novalidate" (submit)="loginUser($event)">
                                    <div class="form-group">
                                        <label for="username" class="control-label">Username</label>
                                        <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="example@gmail.com">
                                        <span class="help-block"></span>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="control-label">Password</label>
                                        <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password" placeholder="******">
                                        <span class="help-block"></span>
                                    </div>
                                    <div id="loginErrorMsg" class="alert alert-error hide">Wrong username or password</div>
                                    <div class="checkbox">
                                    </div>
                                    <button type="submit" class="btn btn-success btn-block">Login</button>

                                </form>

Error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError: No provider for Http! Error: StaticInjectorError(AppModule)[LogincomponentComponent -> Http]:
StaticInjectorError(Platform: core)[LogincomponentComponent -> Http]: NullInjectorError: No provider for Http!

Sanjay · Answer 1 · 2018-06-19T07:13:23.450

0

You should import HttpModule or HttpClientModule in app.module file and add it to imports array

If your http object is of type Http import HttpModule If your http object is of type HttpClient import HttpClientModule

and body object is not of type string it is object type it should be

body = { username, password }

edited Jun 19 '18 at 07:13

answered Jun 19 '18 at 07:09

Sanjay

11
3

HttpModule is deprecated in angular6, don't recommend usage of deprecated modules – baao Jun 19 '18 at 07:12
I added it to now i'm getting ERROR Response {_body: "{"timestamp":1529392191129,"status":415,"error":"U…harset=UTF-8' not supported","path":"/user/save"}", status: 415, ok: false, statusText: "OK", headers: Headers, …} – Siba Boba Jun 19 '18 at 07:13
@bambam I did not recommend to use HttpModule just advised to import it if the already import http object is from HttpModule – Sanjay Jun 19 '18 at 07:15
@SibaBoba It is probably a Backend error – Sanjay Jun 19 '18 at 07:15
Why the down vote? – Sanjay Jun 19 '18 at 07:17

Pardeep Jain · Accepted Answer · 2018-06-19T07:27:50.253

-1

You need to Add http module into your app.module like this -

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [],
  imports: [HttpModule]
...

PS:

If you are using HttpClientModule make changes accordingly
HttpModule is deprecated in v>5

edited Jun 19 '18 at 07:27

answered Jun 19 '18 at 07:07

Pardeep Jain

84,110
37
165
215

now i'm getting `ERROR Response {_body: "{"timestamp":1529392191129,"status":415,"error":"U…harset=UTF-8' not supported","path":"/user/save"}", status: 415, ok: false, statusText: "OK", headers: Headers, …}` – Siba Boba Jun 19 '18 at 07:10
This error is coming from backend server – Pardeep Jain Jun 19 '18 at 07:11
HttpModule is deprecated in angular6, don't recommend usage of deprecated modules – baao Jun 19 '18 at 07:12
@bambam Can you please let me know where in the question mentioned that OP is using `httpClient` ? also I am mentioned in my answer about `httpClientModule` as well – Pardeep Jain Jun 19 '18 at 07:16
and FYI `httpModule` is still in working state for some versions , so why DOWNVOTE?? – Pardeep Jain Jun 19 '18 at 07:17
@bambam Strange behaviour of peoples like you, Surprise have you really read my answer before downvoting. anyways OP accepted my answer so must be know now my answer is perfact for person who ask this – Pardeep Jain Jun 19 '18 at 07:23
Bro never mind, I already statated about new module , if you still think my answer can be improved you can edit it. I would be more than happy :) – Pardeep Jain Jun 19 '18 at 07:27
Strange, WHy I am still getting downotes? – Pardeep Jain Jun 19 '18 at 07:32
@bambam Now why have you deleted all your comments from here?? – Pardeep Jain Jun 19 '18 at 07:41

score -1 · Answer 3 · answered Jun 19 '18 at 07:09

-1

In order to use Http in your app you will need to add the HttpModule to your app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule
  ]

answered Jun 19 '18 at 07:09

Dileep Kumar Kottakota

117
8

HttpModule is deprecated in angular6, don't recommend usage of deprecated modules – baao Jun 19 '18 at 07:12
now i'm getting ERROR Response {_body: "{"timestamp":1529392191129,"status":415,"error":"U…harset=UTF-8' not supported","path":"/user/save"}", status: 415, ok: false, statusText: "OK", headers: Headers, …} – Siba Boba Jun 19 '18 at 07:13

Send data to the backend API Angular 6

3 Answers3