web-dev-qa-db-ja.com

'form'（FormsModule、ReactiveFormsModuleが読み込まれている）の既知のプロパティではないため、FormGroupにバインドできません

私はこれを見たばかりです question しかし、私はまだ同じエラーがあります。機能モジュールにインポートする共有モジュールがあります。しかし、FormsModule、ReactiveFormsModuleモジュールを自分の機能モジュールに直接インポートしようとしました。

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" :(

angulartypescriptangular2-formsangular2-modules
13
Javier RB

解決：

import { ReactiveFormsModule } from '@angular/forms'

このモジュールをapp.module.tsまたはYour Component Classにインポートします。 （app.module.tsにインポートすることをお勧めします）。

その後、それを指示します...例：----

imports: [
   ReactiveFormsModule
]
16
Deepak swain

ReactiveFormsModuleモジュールを[yourmoduleName] .module.tsにインポートするのを忘れているかもしれません

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

以下を追加して、formBuilderまたはformGroupを使用しているコンポーネントをインポートします

imports: [ReactiveFormsModule]

1
Gampesh