CODEWITHSUNDEEP
angulartypescriptobservable
The Dead Man
The Dead Man

Reputation: 5576

Angular 6: subscribe does not exist on type void

I want to display success messages to user after submitting a form.

form works perfectly when it come to submit the data but the flash message is not displayed and I get error: subscribe does not exist on type void

Here is what I have done ,

Html: 

<form [formGroup]="angForm" novalidate>
        <div class="form-group">
          <label class="col-md-4">Comment author</label>
          <input type="text" class="form-control" name="author" formControlName="author" #author />
        </div>
        <div *ngIf="angForm.controls['author'].invalid && (angForm.controls['author'].dirty || angForm.controls['author'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['author'].errors.required">
            Name is required.
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-4">comment description</label>
          <input type="text" class="form-control" formControlName="description" #description/>
        </div>
        <div *ngIf="angForm.controls['description'].invalid && (angForm.controls['description'].dirty || angForm.controls['description'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['description'].errors.required">
            description is required.
          </div>
        </div>
        <div class="form-group">
          <button (click)="addReview(author.value, description.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
        </div>
      </form>

component.ts:

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  angForm: FormGroup;
  // tslint:disable-next-line:max-line-length
  constructor(
    private flashMessages: FlashMessagesService,
    private fb: FormBuilder,
    private route: Router,
    private http: HttpClient,
    private activeRouter: ActivatedRoute,
    private moviesService: MoviesService) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      author: ['', Validators.required],
      description: ['', Validators.required]
    });
  }
  addReview(author, description) {
    this.moviesService.addReview(author, description).subscribe(data => {
      if (data.sucess) {
        this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
        this.route.navigate(['/movie']);
      } else {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
        this.route.navigate(['/movie']);
      }
    });
  }
  ngOnInit() {
  }
}

and here service .ts a

addReview(author, description) {
    const uri = 'http://localhost:8000/movies/comments/';
    const obj = {
      author: author,
      description: description
    };
    this
      .http
      .post(uri, obj)
      .subscribe(res =>
          console.log('Done'));
  }

Here is app html component.

<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

Question what is wrong with my code? is this the right way to dispaly flash message? am stuck out here , any help will be great

Upvotes: 0

Views: 7158

Answers (1)

Nicholas Reynolds
Nicholas Reynolds

Reputation: 333

Your addReview() method inside your service is not returning anything. Instead of subscribing to the post() call inside your service, simply return the post() method. This will make the method return an observable which you can subscribe to when you call it:

addReview(author, description) {
    const uri = 'http://localhost:8000/movies/comments/';
    const obj = {
        author: author,
        description: description
    };
    return this.http.post(uri, obj);
}

NOTE: You need to change the way you handle the subscribe to the service call. You can read more about how that works in the angular guide. Your service call should change to:

this.moviesService.addReview(author, description).subscribe(success => {
    this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
    this.route.navigate(['/movie']);
}, error => {
    this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
    this.route.navigate(['/movie']);
});

Upvotes: 1

Related Questions