Send data to the backend API Angular 6 [duplicate]

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="[email protected]">
                                        <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 · Accepted Answer · 2018-06-19 07:13:23Z

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, 2018 at 7:13

answered Jun 19, 2018 at 7:09

Sanjay

111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

baao Over a year ago

HttpModule is deprecated in angular6, don't recommend usage of deprecated modules

Siba Boba Over a year ago

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, …}

Sanjay Over a year ago

@bambam I did not recommend to use HttpModule just advised to import it if the already import http object is from HttpModule

Sanjay Over a year ago

@SibaBoba It is probably a Backend error

Sanjay Over a year ago

Why the down vote?

Pardeep Jain · Accepted Answer · 2018-06-19 07:27:50Z

-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, 2018 at 7:27

answered Jun 19, 2018 at 7:07

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

9 Comments

Siba Boba Over a year ago

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, …}

Pardeep Jain Over a year ago

This error is coming from backend server

baao Over a year ago

HttpModule is deprecated in angular6, don't recommend usage of deprecated modules

Pardeep Jain Over a year ago

@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 Over a year ago

and FYI httpModule is still in working state for some versions , so why DOWNVOTE??

|

Dileep Kumar Kottakota · Accepted Answer · 2018-06-19 07:09:56Z

-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, 2018 at 7:09

Dileep Kumar Kottakota

1278 bronze badges

2 Comments

baao Over a year ago

HttpModule is deprecated in angular6, don't recommend usage of deprecated modules

Siba Boba Over a year ago

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, …}

Collectives™ on Stack Overflow

Send data to the backend API Angular 6 [duplicate]

3 Answers 3

5 Comments

9 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

9 Comments

2 Comments

Linked

Related