Angular 8 表单，ngSubmit 返回空数据对象

Question

总的来说，我对 Angular 和前端开发还很陌生，但我不明白为什么 onSubmit 方法没有得到我在输入框中输入的值，我已经根据 Angular 表单教程完成了它，但它不起作用。

我在这里尝试做的是制作一个书籍对象并通过http post方法将其发送到我的API，但表单返回空值。

我的 component.html 表单。

<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>

我的组件.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);
  }
}

感谢您的帮助。

Answer 1

您忘记将formControlName 指令添加到模板中的每个input。

添加它应该可以为您解决问题。

来，试试看：

<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>

另外，由于您已经有了book.value，我真的认为不需要将它传递给onSubmit 方法。所以你可以通过这样做进一步简化它：

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