Javascript 正在尝试添加帖子

我试图为一个大学项目添加帖子，但不知怎么的，它重新加载了页面并重置了页面。它没有显示帖子。我试图通过add post提交表单，但不起作用

我是个新手，不知道该怎么办。请帮帮我

这是我的post.component.html

添加帖子
标题
身体
添加帖子

不要同时使用被动表单和模板驱动。 这意味着如果您使用formControlName，请不要使用ngModel，反之亦然

<h3>Add Post</h3>
<form>
<div class="form-group">
  <label for="title">Title</label>
  <input
    id="title"
    type="text"
    name="title"
    [(ngModel)]="posts.title"
    class="form-control"
    required/>
</div>
<div class="form-group">
  <label for="body">Body</label>
  <input
    id="body"
    type="text"
    name="body"
    [(ngModel)]="posts.body"
    class="form-control"
    required/>
</div>
<div class="form-group">
  <button
  class="btn btn-primary"
  type="button" (click)="submit()">Add Posts</button>
</div>
</form>

请遵循以下链接中所做的更改。这里我使用了模板驱动的表单

import { Component, OnInit, VERSION } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

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

  id: number;
  form: FormGroup;
  posts = { title: '', body: ''};
  post = [];

  constructor(
    public postService: PostService,
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit(): void {
   this.postService.getAll().subscribe((data)=>{
      this.post = data;
      console.log(this.post);
    })
  }

  submit(){
    console.log(this.posts);
   this.postService.update(this.id, this.posts).subscribe(res => {
         console.log('Post updated successfully!');
   })
  }
}