angular - Angular 中的 ReactiveFormsModule 无法与 [formGroup] 一起使用(我到处都看过)

Question

我一直在寻找这个问题的答案，每个人都说只需将 ReactiveFormsModule 添加到模块中即可解决。问题是无法识别 [formGroup]。我发现的解决方案说我只需要将导入添加到模块中，但它根本不起作用。这是我正在做的:

1.- 在 app.module.ts 中，我在 imports 数组中添加了一个路由器模块 MyRouterModule。我还添加了 FormsModule 和 ReactiveFormsModule:

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { MyRouterModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    MyRouterModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.-在 MyRouterModule 中我还添加了两个表单模块:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { InicioComponent } from './inicio/inicio.component';

const routes: Routes = [
  { path: '', component: InicioComponent }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class MyRouterModule { }

3.- 到目前为止，该组件具有非常基本的结构，仅用于测试:

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

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

  theForm:FormGroup = new FormGroup({
    usuario: new FormControl('', Validators.required),
    contrasena: new FormControl('', Validators.required)
  });

  constructor() { }

  ngOnInit(): void {
    
  }

}

4.- 组件模板没有什么特别的:

<div>
    <form [formGroup]="theForm">
        <input type="text" formControlName="usuario" />
        <br />
        <input type="password" formControlName="contrasena" />

        <br />
        <button type="button" [disabled]="!theForm.valid">Aceptar</button>
    </form>
</div>

我错过了什么？我已经按照教程、博客、视频进行操作，复制粘贴了代码，但没有任何效果。错误是无法绑定(bind)到“formGroup”，因为它不是“form”的已知属性。

Answer 1

首先，您只需要一个表单模块。在你的例子中，它是 ReactiveFormsModule。并从你的路由模块中删除所有无用的导入，它不是为了那个。

const routes: Routes = [
  { path: '', component: InicioComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class MyRouterModule { }

然后您必须在某个模块中声明您的InicioComponent。假设你在 AppComponent 中使用它，那么你应该这样做:

@NgModule({
  declarations: [
    AppComponent,
    InicioComponent,
  ],
  imports: [
    BrowserModule,
    MyRouterModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这应该有效。