Angular 8 forms, ngSubmit returns empty data object

Question

I'm fairly new to Angular and front-end development in general, but I dont understand why does onSubmit method doesnt get the values I put in, in input boxes, I've done it acording to the Angular forms tutorial, but it doesnt work.

What im trying to do here is to make a book object and send it to my API through http post method, but the form returns empty values.

my component.html form.

<form [formGroup]="book" (ngSubmit)="onSubmit(book.value)">
        <label>Title</label>
        <input type="text" name="title">

        <label>Author</label>
        <input type="text" name="author">

        <label>Release Date</label>
        <input type="text" name="releasedate">

        <label>Page Count</label>
        <input type="number" name="pagecount">

    <div class="form-group col-md-8 offset-md-2">
        <button type="submit" class="btn btn-lg btn-block">Add</button>
    </div>
</form>

my component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-addbook',
  templateUrl: './addbook.component.html',
  styles: []
})
export class AddbookComponent implements OnInit {

  book;
  constructor(private router: Router, private http:HttpClient, private formBuilder: FormBuilder) {
    this.book = this.formBuilder.group({
      title: '',
      author: '',
      releasedate: '',
      pagecount: ''
    });
   }
   readonly BaseURL= 'https://localhost:5001/api';

  ngOnInit() {
  }

  onSubmit(Data)
  {
      var body = {
        title: this.book.value.title,
        author: this.book.value.author,
        releasedate: this.book.value.releasedate,
        pagecount: this.book.value.pagecount
      };
      return this.http.post(this.BaseURL + '/Booklist', body);
  }
}

Thank you for your help.

Answer 1

You forgot to add the formControlName directive to each input in the template.

Adding that should fix the issue for you.

Here, give this a try:

<form [formGroup]="book" (submit)="onSubmit()">
  <label>Title</label>
  <input type="text" formControlName="title">

  <label>Author</label>
  <input type="text" formControlName="author">

  <label>Release Date</label>
  <input type="text" formControlName="releasedate">

  <label>Page Count</label>
  <input type="number" formControlName="pagecount">

  <div class="form-group col-md-8 offset-md-2">
    <button type="submit" class="btn btn-lg btn-block">Add</button>
  </div>
</form>

Also, since you already have the book.value in place, I don't really see a need for passing it to the onSubmit method. So you can further simplify it by doing this:

onSubmit() {
  var body = { ...this.book.value };
  return this.http.post(this.BaseURL + '/Booklist', body);
}