TS2304：找不到名称“FormGroup”

Question

它说在 TS 文件中找不到名称“FormGroup”：我已正确完成所有操作，有人可以帮我处理这段代码，我不知道这段代码有什么问题。 TS代码

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

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {
     userForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
      this.userForm = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
      lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
      email: ['', [Validators.required, Validators.email]]
    });
    
  }
     onSubmit(){
    if(this.userForm.valid){
      alert('User form is valid!!')
    } else {
      alert('User form is not valid!!')
    }
  }
}

我的 html 代码：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="text-center border border-light p-5">

<p class="h4 mb-4">Sign up</p>
<div class="form-group col">
    <div class="form-row">
        <div class="form-row mb-4">
          
                  <div class="col">
                      <input type="text" formControlName="firstName" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
                  </div>
                  <div class="col">
                      <input type="text" formControlName="lastName" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
                  </div>
        </div>
    </div>
</div>
  <input type="email" formControlName="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">

  <button class="btn btn-info my-4 btn-block" type="submit">Sign in</button>

  <hr>

</form>

在stackoverflow的许多问题中发现了这个问题，但没有运气。 请帮助我找出我做错了什么

Answer 1

我不知道这是否是你所有的代码，但也许你错过了这个导入，因为我没有看到它？

import {FormControl, FormGroup} from '@angular/forms';

Answer 2

您应该在视图加载后初始化表单构建器。

    import {FormControl, FormGroup} from '@angular/forms';

 ngAfterViewInit(){
       this.userForm = this.formBuilder.group({
          firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
          lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]],
          email: ['', [Validators.required, Validators.email]]
        });
    }