时间戳

首页 > 解决方案 > 反应形式Angular的错误，属性'X'没有初始化器，并且没有在构造函数中明确分配

javascript - 反应形式Angular的错误，属性'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:';

  }

}

App.module 文件：

// 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';

如果有人可以帮助我找到错误，我将非常感激！

标签： javascriptangular

解决方案

该错误表明您的属性没有初始化程序...简单的解决方案是重构您的代码

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:';

  }

}

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

推荐阅读