nothing happens when i submit a form in MEAN STACK

Question

so the project is so simple. the user inputs some infos about a book and click submit to save the infos in a database (Mongodb) i'm using MEAN STACK and i'm a noobie (obviously). nothing happens when i submit not even an error.

backend code :

    //POST ONE BOOK
    booksRoute.route('/post').post((req,res,next)=>{
        var x = {
            name   : req.params.name,
            genre  : req.params.genre,   
            author : req.params.author,
            rating : req.params.rating,
            price  : req.params.price
        }
        console.log(x) ; 
        BookModel(x).save((err,data)=>{
            if (err){console.log(err);}
            else res.send(data) ;
}) ;
})

add book component html :

<ul>
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">  
    <li>
    <label>book's name *</label>
    <input name="name" type="text" ngModel>
    </li>
    <li>
    <label>book's genre *</label>
    <input name="genre" type="text" ngModel>
    </li>
    <li>
    <label>book's author *</label>
    <input name="author" type="text" ngModel>
    </li>
    <li>
    <label>rating *</label>
    <input name="rating" type="number" [max]="10" min="0" ngModel>
    </li>
    <li>
    <label>price *</label>
    <input name="price" type="number" ngModel>
    <input class="btn btn-primary" type="submit"/> 
    </li>  
</form>
</ul>

angular service

  postBook(data){
    console.log(data) ;
    return this.http.post(this.backendUrl+'/post',data) ;
  }

in addBook component ts

onSubmit(f){
    //console.log(f.value) ;
    this.apiService.postBook(f.value) ; 
  }

Note : i can get data from the database, i can find a book by it's name but i can't post

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-11-27T18:10:12.270

1

I guess that You need to subscribe to the response of your API/back, something like this:

onSubmit(f){
    //console.log(f.value) ;
    this.apiService.postBook(f.value)
    .subscribe( res => {
     console.log('The back response:', res);
    }); 
}

Until you don't subscribe to the observable which has the http call to the API, is not going to "start" the http call process.

edited Nov 27 '21 at 18:10

answered Nov 27 '21 at 18:04

Juan Vicente Berzosa Tejero

2,786
2
5
15

ur suggestion was correct thank u so much, but i can't understand the logic of this i mean, i thought that we subscribe to an observable to get the new value of it whenever it's value changes right ? but here we're posting data to the database, we're not sending it to the front page or anything, am i making sense here or am i completely wrong. damn this angular is confusing. – Mohamed Ali Mani Nov 27 '21 at 18:25
1

I understand your doubt because it is a bit "messy" at first, but it is the way it works: Until an observable is not subscribed to the http call, it will not start (and, therefore, the 'back' will not receive any signal, process the put, nor return the response that everything went OK,...). I leave you an article about it, and I hope it helps you to have a better understanding of the subject: https://www.tektutorialshub.com/angular/angular-httpclient/ – Juan Vicente Berzosa Tejero Nov 27 '21 at 18:44

nothing happens when i submit a form in MEAN STACK

1 Answers1