0

I am working in angular 4 using web api 2 my post call is not working doesn't hit api. The problem is that it doesn't even give me a single error. Here is my code 

 registerUser() {
    this.confirmPasswordMessage = false;
    if (this.registerForm.valid) {
      this.confirmPasswordMessage = false;
         if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
             this.confirmPasswordMessage = true;
             this._progressBar.done();
             return false;
        }
        const _data = JSON.stringify(this._registerModel);
        this._apiService.postCall('Account/Register', _data).subscribe(resp => {
        }, error => () => {
          console.log(error); }, () => {
          });
    } else {
        return false;
    }
  }

Here is my api service code. 

public postCall<T>(apiUrl: any, itemName: any): Observable<T> {
    const _options = { headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.getItem('access_token')
      }
    )};
      return this.http.post<T>(this.actionUrl + apiUrl, itemName, _options);
  }

Here is my json I am passing. When i run this json through postman it hit the api. But I don't why it is not hitting it from angular application.

"{"FirstName":"Kamran","LastName":"Khan","Email":"[email protected]","UserName":"kamrankhan","Password":"Kamran@786","ConfirmPassword":"Kamran@786"}"

There is nothing wrong with the api it is working fine I tested using postman.

Improve this question
8
  • If it doesn't hit api, as you claim (= no request seen in Network devtools either?), then check if the registerUsermethod gets called at all, if it does - is the form actually valid? (Btw, you also seem to redundantly reset the message this.confirmPasswordMessage) Commented May 2, 2020 at 13:48
  • 1
    1. Unrelated, why are you converting the data to string using JSON.stringify() and also mention 'Content-Type': 'application/json'? The data should be sent without the conversion: this._apiService.postCall('Account/Register', this._registerModel). Commented May 2, 2020 at 13:50
  • i think you no need JSON.stringify your data for http.post() call Commented May 2, 2020 at 13:50
  • I have also try this not strinigify the model but still no reponse. Commented May 2, 2020 at 13:54
  • The apiUrl gives me this link, localhost:20863 Commented May 2, 2020 at 13:55

1 Answer 1

Reset to default
0

I see multiple issues.

  1. Remove the return false inside the if condition. It returns from the function before the HTTP request is made.
  2. The else block is redundant. The function will return either way regardless of the if statement was true or not.
  3. Remove the JSON.stringify(). You need to send the JSON, not a string.
  4. Add a leading slash to the URL. Replace 'Account/Register' with '/Account/Register'.
  5. Issue in definition of error callback function. Here error is the parameter for the function. You can't define a function of form error => () => {}.
  6. The generic type variable <T> in the service function is redundant. It isn't being used here.

Try the following

Component

registerUser() {
  this.confirmPasswordMessage = false;
  if (this.registerForm.valid) {
    this.confirmPasswordMessage = false;
    if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
      this.confirmPasswordMessage = true;
      this._progressBar.done();
      // no `return false;` here
    }
    this._apiService.postCall('/Account/Register', this._registerModel).subscribe(
      resp => { console.log(resp); }, 
      error => { console.log(error); }, 
      () => { console.log('complete'); }
    );
  }
}

Service

public postCall(apiUrl: any, itemName: any): Observable<any> {
  const _options = { 
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('access_token');
    }
  )};
  return this.http.post(this.actionUrl + apiUrl, itemName, _options);
}

If you're starting with Angular, I'd recommend you to go through the Angular tutorial first. It introduces the basic concepts of Angular.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.