TS2304：找不到名称“FormGroup”

Posted 2023-03-13

【中文标题】TS2304：找不到名称“FormGroup”

【英文标题】：TS2304: Cannot find name 'FormGroup'

【发布时间】：2022-01-20 08:46:32

【问题描述】：

它说在 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>

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

【参考方案1】：

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

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

【讨论】：

是的，这里似乎缺少 FormGroup 导入

现在我已经导入它并且我得到一个新的错误：TS2564: Property 'userForm' has no initializer 并且没有在构造函数中明确分配。

您的 tsconfig.json 是否包含以下属性为 true？ "strictPropertyInitialization"

签出这个帖子***.com/questions/49699067/…

【参考方案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]]
        );