angular - 角度错误消息:无法绑定到“formGroup”,因为它不是“form”的已知属性
问题描述
我的代码环境是 Angular 9,当我使用 Material 进行设置和示例时,我遇到了这个错误:
错误 NG8002:无法绑定到“formControl”,因为它不是“form”的已知属性。
我已经在我的应用程序的所有相应模块中添加了相应的导入,但仍然出现错误。
这是我的代码
我的 app.module.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 { }
我的 shared.module.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 { }
forgot.password.component.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 {
}
}
和我的 forgot.password.html
<div class="example-container">
<mat-form-field appearance="fill">
<mat-label>Enter your email</mat-label>
<input matInput placeholder="pat@example.com" [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 { }
解决方案
在shared.module.ts中,您只是在导入ReactiveFormsModule
. 您还需要将其导出以在其他模块中使用
@NgModule({
declarations: [],
imports: [
...
ReactiveFormsModule,
...
],
exports: [
...
ReactiveFormsModule,
...
]
})
而在forgot.password.html的语法是
<input matInput placeholder="pat@example.com" [formControl]="email" required>
不是[FormControl]="email"
推荐阅读
- java - rabbitmq 客户端 AMQP.BasicProperties 如何设置 Headers?
- c# - epplus Excel 持续时间公式在 C# 中不起作用
- mysql - laravel Eloquent/QueryBuilder - 为什么变量 $prod 的值变成“?” 在 Sql 查询中?
- java - 如何在rest API中将结构降低到我想要的形式,这样我就可以节省很多服务器请求
- angular - geojson 无法填充我们的区域地图
- java - Java List.contains(ArrayList
字段值等于 x) - android - 我想将 sqlite 数据库中的数据检索到另一个活动的 textview 中,我的数据库代码如下所示
- python - 使用 Python 访问 Microsoft Sharepoint 文件和数据
- sql-server - 通过链接服务器查询时如何执行无错误事务?
- php - wordpress - 未定义 jQuery - wp/admin