角度错误消息：无法绑定到'formGroup'，因为它不是"form"的已知属性

Question

我的代码环境是Angular 9，当我用Material设置和示例时，我遇到了这个错误：

错误NG8002:无法绑定到"formControl"，因为它不是"form"的已知属性。

我已经在应用程序中的所有相应模块中添加了相应的导入，但错误仍然不断出现。

这是我的代码

我的应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AuthenticationModule } from './modules/authentication/authentication.module';
import { SharedModule } from './modules/shared/shared/shared.module'
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { LandingModule } from './modules/landing/landing.module';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AuthenticationModule,
SharedModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
extend: true,
isolate: false
}),
LandingModule
],
providers: [HttpClientModule],
bootstrap: [AppComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }

我的共享模块.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [],
imports: [
CommonModule,
TranslateModule.forRoot(),
MatButtonModule,
MatCardModule,
MatFormFieldModule,
MatInputModule,
FormsModule, 
ReactiveFormsModule
],
exports: [
CommonModule,
MatButtonModule,
MatCardModule,
MatFormFieldModule,
MatInputModule
]
})
export class SharedModule { }

放弃。密码。组件。ts

import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
@Component({
selector: 'segura-forgot-password',
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.scss']
})
export class ForgotPasswordComponent implements OnInit {
email = new FormControl('', [Validators.required, Validators.email]);
getErrorMessage() {
if (this.email.hasError('required')) {
return 'You must enter a value';
}
return this.email.hasError('email') ? 'Not a valid email' : '';
}
constructor() { }
ngOnInit(): void {
}
}

和我之前的t.password.html

<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Enter your email</mat-label>
<input matInput placeholder="[e-mail]" [FormControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>

身份验证模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthenticationRoutingModule } from './authentication-routing.module';
import { ForgotPasswordComponent } from './components/forgot-password/forgot-password/forgot-password.component';
import { SharedModule } from '../shared/shared/shared.module';
import { RegisterComponent } from './components/register/register/register.component';
import { LoginComponent } from './components/login/login/login.component';
import { LegalTermsComponent } from './components/legal-terms/legal-terms/legal-terms.component';
@NgModule({
declarations: [LoginComponent, ForgotPasswordComponent, RegisterComponent, LegalTermsComponent],
imports: [
CommonModule,
AuthenticationRoutingModule,
SharedModule
]
})
export class AuthenticationModule { }

Answer 1

在共享的.module.ts中，您只是在导入ReactiveFormsModule。您还需要将其导出以用于其他模块

@NgModule({
declarations: [],
imports: [
...
ReactiveFormsModule,
...
],
exports: [
...
ReactiveFormsModule,
...
]
})

并且在forget.password.html中，语法是

<input matInput placeholder="[e-mail]" [formControl]="email" required>

非[FormControl]="email"