【问题标题】:Can't bind to FormGroup since it isn't a known property of 'form' (FormsModule, ReactiveFormsModule loaded)无法绑定到 FormGroup,因为它不是“form”的已知属性(FormsModule,ReactiveFormsModule 已加载)
【发布时间】:2017-02-01 02:40:01
【问题描述】:

我刚刚看到这个question,但我仍然有同样的错误。我有一个共享模块,我将它导入到我的功能模块中。但我也尝试将FormsModuleReactiveFormsModule 模块直接导入我的功能模块。

Angular 2.0 最终版。

我的共享模块是:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';


import { UploadComponent } from './upload/index';

import { AuthenticationService } from './services/index';

@NgModule({
  declarations: [ UploadComponent, UPLOAD_DIRECTIVES ],
  imports: [ CommonModule ],
  providers: [ AuthenticationService ],
  exports: [
    FormsModule,
    CommonModule,
    UploadComponent,
    ReactiveFormsModule
  ]
})

export class SharedModule { }

我的功能模块:

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';

import { LoginComponent } from './login.component';

@NgModule({
  imports: [ SharedModule ],
  declarations: [ LoginComponent ],
  exports: [ LoginComponent ]
})

export class LoginModule {
  constructor() {}
}

组件:

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { AuthenticationService } from '../shared';

@Component({
  selector: 'pol-login',
  templateUrl: 'login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;
  notValidCredentials: boolean = false;
  showUsernameHint: boolean = false;

  constructor(
    fb: FormBuilder,
    private authenticationService: AuthenticationService) {

      this.loginForm = fb.group({
        username: ['', Validators.compose([Validators.required, this.emailValidator])],
        password: ['', Validators.required]
      });
...
}

还有观点:

<form class="container" (ngSubmit)="authenticate()" [ERROR ->][FormGroup]="loginForm">
....
</form>

所有路径和导入都是正确的。有任何想法吗?谢谢。

----- [已解决] --------

[FormGroup]="loginForm" 更改为[formGroup]="loginForm" :(

【问题讨论】:

  • 把它改成[formGroup](camelCase,不是PascalCase)看看接下来会发生什么?
  • 谢谢哈利。模块 @angular....forms 没有导出成员 formGroup
  • 对不起哈利。是的,它有效。我已经在模块上更改了它,而不是在视图中。对不起,非常感谢你:)

标签: angular typescript angular2-forms angular2-modules


【解决方案1】:

解决方案:

import { ReactiveFormsModule } from '@angular/forms'

将此模块导入 app.module.ts 或您的组件类。 (建议在 app.module.ts 中导入)。

然后直接...例如:---

imports: [
   ReactiveFormsModule
]

【讨论】:

  • 我已经在 app.module.ts 中导入了,但仍然出现同样的错误。
  • 请评论以下详细信息:您正在处理哪个版本的角度项目?在 Material Dialog 中使用 FormGroup 时遇到问题了吗?
【解决方案2】:

您可能错过了将 ReactiveFormsModule 模块导入您的 [yourmoduleName].module.ts

import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule } from '@angular/forms';

并在下面添加您正在使用 formBuilder 或 formGroup 的组件

imports: [ReactiveFormsModule]

【讨论】:

    猜你喜欢
    • 2021-01-31
    • 2021-10-27
    • 2019-08-26
    • 2019-09-19
    • 2017-09-01
    • 2017-02-26
    • 2018-02-24
    • 2021-04-08
    相关资源
    最近更新 更多