我的“ ngSubmit”有时会出错

Question

所以我有这个html代码。我尝试使用（click）函数，它仍然像这样

<div class="container">
  <h1><a [routerLink]="['/databuku']"><img src="images/images.png" width="42" height="42"></a>
      Add New Book</h1>
  <div class="row">
    <div class="col-md-6">
      <form (ngSubmit)="saveBuku()" #bukuForm="ngForm">
        <div class="form-group">
          Judul
          <input type="text" class="form-control" [(ngModel)]="buku.judul" name="judul" required>
        </div>
        <div class="form-group">
          Author
          <input type="text" class="form-control" [(ngModel)]="buku.author" name="author" required>
        </div>
        <div class="form-group">
          Description
          <textarea class="form-control" [(ngModel)]="buku.description" name="description" required cols="40" rows="5"></textarea>
        </div>
        <div class="form-group">
             <button type="submit" class="btn btn-success" [disabled]="!bukuForm.form.valid">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

这是我的ts文件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-tambah-buku',
  templateUrl: './tambah-buku.component.html',
  styleUrls: ['./tambah-buku.component.css']
})
export class ComponentTambahBuku implements OnInit {

  buku = {};

  constructor(private http: HttpClient, private router: Router) { }

  ngOnInit() {
  }

  saveBuku() {
    this.http.post('http://localhost:8080/buku', this.buku)
      .subscribe(res => {
          let id = res['id'];
          this.router.navigate(['/detail-buku/', id]);
        }, (err) => {
          console.log(err);
        }
      );
  }
}

当我打开localhost：4200时没有发现错误，就在我按下保存按钮时，就像按钮不起作用，不保存并且不会进入'detail-buku'页面一样