我在Angular 12中使用Reactive表单创建了一个登录组件。下面是模板文件和TypeScript的样子。
但是我在浏览器中运行时一直得到这个错误（我也试过使用formBuilder，但仍然得到相同的错误）：

core.js:6456 ERROR TypeError: this.ngControl?.control?.hasValidator is not a function
    at MatInput.get required [as required] (input.mjs:194)
    at MatInput_HostBindings (input.mjs:388)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at refreshEmbeddedViews (core.js:10570)
    at refreshView (core.js:9469)
    at refreshComponent (core.js:10616)

signup.component.html

<section>
  <form fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" [formGroup]="loginForm"
    (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input type="email" matInput placeholder="Your email" formControlName="email">
      <mat-hint>Please enter a valid email.</mat-hint>
      <mat-error>Invalid or missing email.</mat-error>
    </mat-form-field>
      <mat-form-field >
        <input type="password" matInput placeholder="Your password" formControlName="password">
        <mat-hint>"Should be at least 6 characters long."</mat-hint>
        <mat-error>Missing password.</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input matInput [max]="maxDate" [matDatepicker]="picker" formControlName="datepicker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <mat-checkbox color="primary" formControlName="checkbox">Agree to Terms and Conditions.</mat-checkbox>
      <button type="submit" mat-raised-button color="primary" [disabled]=loginForm.invalid>Submit</button>
  </form>
</section>

signup.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
  maxDate: Date | undefined;
  loginForm!: FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.maxDate = new Date();
    this.maxDate.setFullYear(this.maxDate.getFullYear() - 18);

    this.loginForm = new FormGroup({
      email: new FormControl('', {
        validators: [Validators.required, Validators.email]
      }),
      password: new FormControl('', {
        validators: [Validators.required]
      }),
      datepicker: new FormControl('', {
        validators: [Validators.required]
      }),
      checkbox: new FormControl('', {
        validators: [Validators.required]
      }),
    });
  }
  
  onSubmit() {
    console.log(this.loginForm);
  }
}

有谁知道如何解决这个问题吗？在谷歌搜索和测试了几个小时后，有点卡在这里了。

这里还有我的app.modul.ts

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SignupComponent } from './auth/signup/signup.component';
import { LoginComponent } from './auth/login/login.component';
import { TrainingComponent } from './training/training.component';
import { CurrentTrainingComponent } from './training/current-training/current-training.component';
import { NewTrainingComponent } from './training/new-training/new-training.component';
import { PastTrainingComponent } from './training/past-training/past-training.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    SignupComponent,
    LoginComponent,
    TrainingComponent,
    CurrentTrainingComponent,
    NewTrainingComponent,
    PastTrainingComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    FlexLayoutModule,
    ReactiveFormsModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }