Angular8：为什么ngForm类型的形式在组件内部是“未定义”？

Question

我正在制作MEAN Stack应用程序，因此我在Angular 8中使用前端。我已经在main.component.html文件中初始化了ngForm“ mainForm”，并将其传递给main.component.ts文件中的函数resetform（mainForm），但是显示“ mainForm”的运行时错误未定义整个时间。我还是不明白为什么。如果您有帮助，将不胜感激。

这是我的main.component.html，下面是我的main.component.ts

import { Component, OnInit } from '@angular/core';
import {NgForm} from "@angular/forms";
import {SalesmanService} from "../shared/salesman.service";
import {MainService} from "../shared/main/main.service";
import {Salesman} from "../shared/salesman.model";
import {SalesmanPipe} from "../shared/salesman.pipe";

declare var M: any;

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  providers: [MainService, SalesmanService]
})
export class MainComponent implements OnInit {
  searchID: Number = null;

  constructor(private mainService : MainService, private salesmanService : SalesmanService) { }

  ngOnInit() {
    //this.resetForm();
    this.refreshSalesmanList();
  }

  onSubmit(mainForm: NgForm) {
    this.mainService.getSalesmanByID(mainForm.value.id).subscribe((res) =>{
      //this.resetForm(mainForm);
      M.toast({html: 'fetched successfully', classes: 'rounded'}); // this is for a round boarder!
    });
  }

  refreshSalesmanList() {
    this.mainService.getSalesmanList().subscribe((res) => {
      this.mainService.salesmenArray = res as Salesman[];
    });
  }
  resetForm(form?: NgForm) {
    if (form.valid) // whether its not null
      form.reset();
  }

  checkFor(id: Number){

    for(var counter:number = 0; counter<this.mainService.salesmenArray.length; counter++){
      if(id == this.mainService.salesmenArray[counter].id){
        return true;
      }
    }
    return false;
  }
  getItemByID(id: Number){
    if(this.checkFor(id)){
      for(var counter:number = 0; counter<this.mainService.salesmenArray.length; counter++){
        if(id == this.mainService.salesmenArray[counter].id){
          return this.mainService.salesmenArray[counter];
        }
      }
    }
    return {
      id: null,
      name: "",
      age: null,
      department: ""
    };
  }

  alert(hello: string) {
    console.log(hello);
  }
}

<!---------------------------------------->

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content white-text">
        <div class="row">
          <div class="col s5">

            <h5> This is the main panel</h5>

            <ngForm #mainfForm="ngForm" (ngSubmit)="onSubmit(mainfForm)">


              <div class="row">
                <!--<input type="text" id="searchTextId" [(ngModel)]="searchID" name="searchID" placeholder="Search Salesman By ID">-->
                <div class="input-field col s12">
                  <input type="text" name="id" #id="ngModel" [(ngModel)]="mainService.selectedSalesman.id" placeholder="Enter ID..." required>
                  <label>ID:
                    <label class="red-text">*</label>
                  </label>
                </div>
              </div>


              <!-- Buttons! -->
              <div class="row">
                <div class="input-field col s12">
                  <button class="btn btn-custom right" type="button" (click)="alert('hello');//resetForm(mainfForm)"> Reset </button>
                  <a routerLink="/main/:id" routerLinkActive="active"><button class="btn btn-custom right" type="submit" [disabled]="!mainfForm.valid"> Submit </button> </a><!--the disabled attribute is for disabling the button incase the required field name was not filled-->
                </div>
              </div>
              <!-- Buttons! -->

            </ngForm>
          </div>

          <router-outlet></router-outlet>

          <!-- this is a table to list the documents!-->
          <div class="col s7">

            <input type="text" id="searchTextId" [(ngModel)]="searchID" name="searchID" placeholder="Search Salesman By ID">

            <!--
            Table using pipe command
            -->
            <tr *ngFor="let item of (mainService.salesmenArray | salesman: searchID)">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.age}}</td>
              <td>{{item.department}}</td>
              <td><button type="button" class="btn btn-secondary btn-sm" (click)="getItemByID(item.id)">Delete</button></td>
            </tr>

            <table class="responsive-table highlight">

              <thead>
              <tr>
                <th> Employee ID </th>
                <th> Name </th>
                <th> Year of Performance </th>
                <th> Department </th>

              </tr>
              </thead>

              <tr *ngIf="checkFor(mainService.selectedSalesman.id)"> <!-- the ngFor directive allows us to iterate over the array-->
                <td> {{mainService.selectedSalesman.id}} </td>
                <td> {{mainService.selectedSalesman.name}} </td>
                <td> {{mainService.selectedSalesman.age}} </td>
                <td> {{mainService.selectedSalesman.department}} </td>
              </tr>



            </table>

            <div>
              Total : {{ mainService.getBonus(mainService.selectedSalesman.id)}}
            </div>

          </div>


        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-content white-text">
        <div class="row">

          <!-- this is a table to list the documents!-->
          <div class="col s7">
            <table class="responsive-table highlight">

              <thead>
              <tr>
                <th> Employee ID </th>
                <th> Name </th>
                <th> Year of Performance </th>
                <th> Department </th>

              </tr>
              </thead>

              <tr *ngFor="let item of mainService.salesmenArray"> <!-- the ngFor directive allows us to iterate over the array-->
                <td> {{item.id}} </td>
                <td> {{item.name}} </td>
                <td> {{item.age}} </td>
                <td> {{item.department}} </td>

                <td>

                </td>
              </tr>



            </table>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>