'form'의 알려진 속성이 아니므로 'formGroup'에 바인딩 할 수 없습니다.

그 상황:

도와주세요! Angular2 앱에서 매우 간단한 형식으로 만들려고하지만 작동하지 않는 방식에 관계없이 무엇입니까?

앵귤러 버전 :

각도 2.0.0 Rc5

오류:

Can't bind to 'formGroup' since it isn't a known property of 'form'

코드:

보기:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

컨트롤러 :

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

ngModule :

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

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

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

질문:

왜 그 오류가 발생합니까?

뭔가 빠졌습니까?

RC5 수정

당신은 할 필요가 import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'컨트롤러에 그리고 추가 directives에서 @Component. 문제가 해결됩니다.

수정 후 formControlName="name"입력에 양식을 추가하지 않았기 때문에 다른 오류가 발생했을 수 있습니다 .

RC6 / RC7 / 최종 릴리스 FIX

이 오류를 해결하려면 모듈에서 가져 오기만 ReactiveFormsModule하면 @angular/forms됩니다. 다음은 ReactiveFormsModule가져 오기 가있는 기본 모듈의 예입니다 .

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

추가로 설명하려면 의 일부인 formGroup지시문에 대한 선택기 이므로이를 가져와야합니다. 기존 요소를 DOM 요소 에 바인딩하는 데 사용됩니다 . Angular의 공식 문서 페이지 에서 자세한 내용을 읽을 수 있습니다 .FormGroupDirectiveReactiveFormsModuleFormGroup

기능 모듈 과 결합 된 Angular 4 (예 : 공유 모듈을 사용하는 경우)도 ReactiveFormsModule작업으로 내 보내야합니다 .

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

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 

파고 난 후 "formform의 알려진 속성이 아니기 때문에 'formGroup'에 바인딩 할 수 없습니다"에 대한 해결책을 찾았습니다.

필자의 경우 여러 모듈 파일을 사용하고 있는데 app.module.ts에 ReactiveFormsModule을 추가했습니다.

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

그러나 다른 모듈에 추가 된 구성 요소의 [formGroup] 지시문을 사용하면 (예 : author.module.ts 파일에 등록 된 author.component.ts에서 [formGroup] 사용) 작동하지 않습니다.

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

app.module.ts에 ReactiveFormsModule을 추가하면 기본적으로 ReactiveFormsModule 은이 경우 author.module과 같은 모든 하위 모듈에 의해 상속됩니다 ... (잘못된!) 모든 지시문이 작동하게하려면 author.module.ts에서 ReactiveFormsModule을 가져와야했습니다.

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

따라서 서브 모듈을 사용하는 경우 각 서브 모듈 파일에서 ReactiveFormsModule을 가져와야합니다. 이것이 누군가를 돕기를 바랍니다.

구성 요소의 단위 테스트 중에이 오류가 발생했습니다 (응용 프로그램 내에서 테스트 중에 만 정상적으로 작동 함). 해결책은 파일 로 가져 오는 것 ReactiveFormsModule입니다 .spec.ts.

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

제안 된 답변은 Angular 4에서 작동하지 않았습니다. 대신 접두사 와 함께 다른 속성 바인딩 방법을 사용해야했습니다 attr.

<element [attr.attribute-to-bind]="someValue">

두 개의 모듈을 가져와야 할 경우 다음과 같이 추가하십시오

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

'기능 모듈'을 정의한 경우 이미 기능 모듈을 가져 왔더라도 기능 모듈에서 가져와야합니다 AppModule. Angular 설명서에서 :

모듈은 다른 모듈에서 선언 된 구성 요소, 지시문 또는 파이프에 대한 액세스를 상속하지 않습니다. AppModule이 가져 오는 것은 ContactModule과 관련이 없으며 그 반대도 마찬가지입니다. ContactComponent가 [(ngModel)]과 바인드되기 전에 ContactModule이 FormsModule을 가져와야합니다.

https://angular.io/docs/ts/latest/guide/ngmodule.html

이 모듈에서 FormGroup을 인식하지 못한다고 오류가 표시됩니다. 따라서 FormGroup 을 사용하는 모든 모듈 에서 (아래) 모듈을 가져와야합니다.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

그런 다음 FormsModule 및 ReactiveFormsModule을 모듈의 imports 배열에 추가하십시오.

imports: [
  FormsModule,
  ReactiveFormsModule
],

내가 이미 AppModule에 추가했다고 생각 하고 그것을 상속해야합니까? 그러나 그렇지 않습니다. 이러한 모듈은 가져 오기 모듈에서만 사용할 수있는 필수 지시문을 내보내고 있기 때문입니다. 자세한 내용은 여기 ( https://angular.io/guide/sharing-ngmodules)를 참조하십시오 .

이러한 오류의 다른 요인은 다음과 같은 철자 오류 일 수 있습니다.

[FormGroup] = "form" 작은 f 대신 대문자 F

[formsGroup] = "폼" 여분 의 형태 후

Angular 7에서도 동일한 문제가 발생했습니다. app.module.ts 파일에서 다음을 가져 오십시오.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

그런 다음 FormsModule 및 ReactiveFormsModule을 imports 배열에 추가하십시오.

imports: [
  FormsModule,
  ReactiveFormsModule
],

이 문제는 FormsModule, ReactiveFormsModule 가져 오기가 누락되어 발생하며 동일한 문제가 발생했습니다. 내 사건은 혼란 스러웠다. 하위 모듈로 가져 왔지만 상위 모듈에서 위의 가져 오기를 놓쳤습니다. 작동하지 않았습니다.

그런 다음 아래와 같이 부모 모듈로 가져 와서 작동했습니다!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

이 오류에 대해이 스레드를 걷는 사람들에게. 필자의 경우 FormsModule 및 ReactiveFormsModule 만 내보내고 가져 오는 것을 잊어 버린 공유 모듈이있었습니다. 하위 그룹에서 양식 그룹이 작동하지 않는 이상한 오류가 발생했습니다. 이것이 사람들이 머리를 긁는 데 도움이되기를 바랍니다.

e2e 테스트를 시도 할 때이 오류가 발생했으며 이에 대한 답변이 없다는 것이 나를 미치게했습니다.

테스트를하고 있다면 * .specs.ts 파일을 찾아서 추가하십시오 :

import {ReactiveFormsModule, FormsModule} from '@angular/forms';

약간의주의 사항 : 로더에주의하고 최소화하십시오 (레일 환경) :

이 오류를보고 모든 솔루션을 시도한 후 html 로더에 문제가 있음을 깨달았습니다.

이 로더 ( config/loaders/html.js.)를 사용 하여 구성 요소의 HTML 경로를 가져 오도록 Rails 환경을 설정했습니다 .

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

몇 시간 동안 노력하고 수많은 ReactiveFormsModule 수입 후 내 formGroup작은 글자 임을 보았습니다 formgroup.

이로 인해 로더가 생겨서 HTML을 최소화했습니다.

옵션을 변경 한 후에는 모든 것이 정상적으로 작동했으며 다시 울기 시작했습니다.

나는 이것이 질문에 대한 답이 아니라는 것을 알고 있지만 미래의 Rails 방문자 (및 다른 사용자 정의 로더가있는 사람들)에게는 이것이 도움이 될 수 있다고 생각합니다.

REACTIVE_FORM_DIRECTIVES 사용 및 가져 오기 :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

구성 요소를 개발할 때이 문제가 발생하면 가장 가까운 모듈에 다음 두 모듈을 추가해야합니다.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

구성 요소에 대한 테스트를 개발하는 경우 다음과 같이이 모듈을 테스트 파일에 추가해야합니다.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

해당 모듈에서 ReactiveFormsModule 가져 오기

간단한 해결책 :

1 단계 : ReactiveFormModule 가져 오기

import {ReactiveFormsModule} from '@angular/forms';

2 단계 : "ReactiveFormsModule"을 추가하여 섹션 가져 오기

imports: [

    ReactiveFormsModule
  ]

3 단계 : 앱 다시 시작 및 완료

예 :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

app.module.ts에서 ReactiveFormsModule을 가져 와서 등록하십시오.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

.ts 및 .html 파일 모두에서 철자가 올바른지 확인하십시오. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html 파일

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

실수로 [formGroup]에 [FormGroup]을 작성했습니다. .html에서 철자를 올바르게 확인하십시오. .html 파일에 문제가 있으면 컴파일 시간 오류가 발생하지 않습니다.

참고 : 하위 모듈의 구성 요소 내부에서 작업 하는 경우 부모 응용 프로그램 루트 모듈이 아닌 하위 모듈에서 ReactiveFormsModule 을 가져와야 합니다.

나 같은 바보 바보하지 마십시오. 위와 같은 오류가 발생했습니다.이 스레드의 옵션 중 아무것도 작동하지 않았습니다. 그런 다음 FormGroup에서 'F'를 대문자로 표시했습니다. 도!

대신에:

[FormGroup]="form"

하다:

[formGroup]="form"

이것이 단지 타입 스크립트 오류이지만 양식의 모든 것이 작동하는 경우 IDE를 다시 시작해야 할 수도 있습니다

하위 모듈을 사용하는 경우 (예를 들어, app.component.module.ts뿐만 아니라 login.module.ts와 같은 별도의 구성 요소를 가지고 있으며,이 로그인에 ReactiveFormsModule 가져 오기를 포함해야합니다) .module.ts import, 작동합니다. 모든 하위 모듈을 사용하기 때문에 app.component.module에서 ReactiveFormsModule을 가져올 필요조차 없습니다.

login.module.ts :

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

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

누군가를 도울 수 있습니다.

모달 (entrycomponent)에 formGroup이 있으면 모달이 인스턴스화 된 모듈에서도 ReactiveFormsModule을 가져와야합니다.

Can't bind to 'formGroup' since it isn't a known property of 'form'

angular ( [prop])를 사용하여 속성을 바인딩하려고 하지만 angular는 해당 요소에 대해 알고있는 것을 찾을 수 없습니다 (이 경우form ) .

올바른 모듈을 사용하지 않으면 (어딘가에서 가져 오기가 누락 됨) 발생할 수 있으며 때로는 오타가 발생합니다.

[formsGroup]과 s후form

내 솔루션은 미묘했고 이미 나열되지 않았습니다.

에 선언되지 않은 Angular Materials Dialog 구성 요소에서 반응 양식을 사용하고있었습니다 app.module.ts. 기본 구성 요소가 선언되어 app.module.ts대화 상자 구성 요소가 열리지 만 대화 상자 구성 요소가 명시 적으로 선언되지 않았습니다app.module.ts .

대화 상자를 열 때마다 양식 에서이 오류가 발생했다는 점을 제외하고는 대화 상자 구성 요소를 사용하는 데 아무런 문제가 없었습니다.

Can't bind to 'formGroup' since it isn't a known property of 'form'.

먼저 Angular 버전> 2 와 관련이 없습니다 . app.module.ts 파일에서 다음을 가져 오면 문제가 해결됩니다.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

그런 다음 FormsModule 및 ReactiveFormsModule을 imports 배열에 추가하십시오.

imports: [
  FormsModule,
  ReactiveFormsModule
],

참고 : ReactiveFormsModule대신 특정 모듈로 가져올 수도 있습니다app.module.ts

모듈에 AppModule모든 것을 추가하면 모든 것이 잘 작동하기 시작했습니다.