Javascript 反应形式、角度、属性和x27错误；X'；没有初始值设定项，并且未在构造函数中明确指定

我正试图为我想在项目中实现的一个小表单创建一个被动表单，但不知道Angular为什么会给我这个错误：

属性“formulario”没有初始值设定项，并且未在构造函数中明确指定

这是我的代码：

组件文件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  public formulario: FormGroup;

  constructor(private router: Router, private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit(): void {
  }

  createForm(){
    this.formulario = this.fb.group({
      nombre: ['', []],
      email: ['', []],
      mensaje: ['', []],
    })
  }

  sendMail(){
    let string = 'mailto:';

  }

}

// Modules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { PagesModule } from './pages/pages.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Components

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { MediaComponent } from './shared/media/media.component';

@NgModule({
  declarations: [AppComponent, NavbarComponent, MediaComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PagesModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

App.module文件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  public formulario: FormGroup;

  constructor(private router: Router, private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit(): void {
  }

  createForm(){
    this.formulario = this.fb.group({
      nombre: ['', []],
      email: ['', []],
      mensaje: ['', []],
    })
  }

  sendMail(){
    let string = 'mailto:';

  }

}

// Modules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { PagesModule } from './pages/pages.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Components

import { AppComponent } from './app.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { MediaComponent } from './shared/media/media.component';

@NgModule({
  declarations: [AppComponent, NavbarComponent, MediaComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PagesModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

在Pages模块中还实现了以下代码行：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

---

如果有人能帮我找到错误，我会非常感激

错误表示您的属性没有初始值设定项。。。简单的解决方案是重构代码

export class ContactComponent implements OnInit {

   formulario = this.fb.group({
      nombre: ['', []],
      email: ['', []],
      mensaje: ['', []],
    })

  constructor(private router: Router, private fb: FormBuilder) {
  }

  ngOnInit(): void {
  }

  sendMail(){
    let string = 'mailto:';

  }

}

---

我喜欢这种方法，因为代码变得易于遵循、测试和维护

您的项目中是否启用了“严格”模式？如果这样设置你的

public formulario:FormGroup | undefined

@Edward我已经尝试过了，但是这个错误被抛出了：

类型“undefined”不能分配给类型“FormGroup”

试试看这是否有效：@mikkelcristensen我已经检查了帖子，但不是我想要的。问题是，我无法理解为什么在我输入

FormGroup

元素时也会抛出这个错误。它可以工作，我也理解为什么，老实说，它更容易维护，但是…为什么它不能工作我的previos代码？我想了解它。