角反应形式不会在Submit上重置

每当我输入一些值并提交此重置表格但不删除任何验证错误时

我已经在StackOverflow上尝试了很多东西，但没有解决错误

我已经尝试了数小时的其他事情，但最终还是没有运气，现在我问的是问题，但是堆栈溢出说我的问题主要是代码添加了一些文本，所以我写了一些长篇幅的文字，因此阅读不多，请阅读代码，帮我谢谢

这是ts代码

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {ItemCategory} from "../../models/item.model";
import {Subscription} from "rxjs";
import {AuthService} from "../../auth/auth.service";
import {mimeType} from "../validators/mime-type.validator";

@Component({
  selector: 'app-create-item',
  templateUrl: './create-item.component.html',
  styleUrls: ['./create-item.component.css']
})
export class CreateItemComponent implements OnInit {
  isLoading = false;
  form: FormGroup;
  imagePreview: string;
  categories = Object.keys(ItemCategory).map(key => ItemCategory[key])
  private authStatusSub: Subscription;


  constructor(private authService: AuthService) {

  }

  ngOnInit(): void {
    this.authStatusSub = this.authService
      .authStatusListener
      .subscribe(authStatus => {
        this.isLoading = false;
      });
    this.loadForm();
  }

  onSavePost() {
    this.form.reset()
  }

  loadForm() {
    this.form = new FormGroup({
      title: new FormControl(null, {validators: [Validators.required, Validators.minLength(3)]}),
      category: new FormControl(null, [Validators.required]),
      description: new FormControl(null, [Validators.required, Validators.minLength(10)]),
      image: new FormControl(null, [Validators.required], mimeType)
    });
  }

  onImagePicked(event: Event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.form.patchValue({image: file});
    this.form.get('image').updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result as string;
    };
    reader.readAsDataURL(file);
  }
}

这是HTML

    <h1>Create Item</h1>
<div class="container">
  <mat-card>
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">

      <mat-form-field>
        <input matInput type="text" formControlName="title" placeholder="Item Title">
        <mat-error *ngIf="form.get('title').invalid">Please enter a valid item title</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Category</mat-label>
        <mat-select formControlName="category">
          <mat-option [value]="null" disabled>Choose Category</mat-option>
          <mat-option *ngFor="let category of categories" [value]="category">
            {{category}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('category').invalid">Please enter a valid item title</mat-error>
      </mat-form-field>

      <mat-form-field>
        <textarea matInput rows="4" formControlName="description" placeholder="Item Description"></textarea>
        <mat-error *ngIf="form.get('description').invalid">Please enter a suitable Description.</mat-error>
      </mat-form-field>

      <div>
        <button mat-stroked-button type="button" (click)="filePicker.click()">Pick Main Image</button>
        <input type="file" #filePicker (change)="onImagePicked($event)">
      </div>

      <div class="image-preview" *ngIf="imagePreview !== '' && imagePreview && form.get('image').valid">
        <img [src]="imagePreview" [alt]="form.value.title">
      </div>

      <button id="create-button" mat-raised-button color="accent" type="submit">Create</button>

    </form>
  </mat-card>
</div>