'formGroup'은 'form'의 알려진 속성이 아니므로 바인딩할 수 없습니다.
상황
Angular 어플리케이션에서 매우 간단한 형태로 만들려고 하는데, 어떤 일이 있어도 작동하지 않습니다.
Angular 버전
각도 2.0.0 RC5
에러
'formGroup'은 '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)
}
}
ng모듈
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 { }
질문
왜 이 에러가 나는 거죠?내가 뭘 빼놓았나요?
RC6/RC7/최종 릴리즈 픽스
To fix this error, you just need to import 이 오류를 수정하려면 가져오기만 하면 됩니다.ReactiveFormsModule부에서@angular/forms당신 모듈에 있어요.를 참조해 주세요. Here's the example of a basic module with 다음 예시는 기본 모듈의 예입니다.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 { }
To explain further, 좀 더 자세히 설명하자면formGroup is a selector for directive named 라는 이름의 디렉티브의 셀렉터입니다.FormGroupDirective은 것그 that that that의 일부입니다.ReactiveFormsModule수입하다의 것을 묶을 때 합니다.FormGroupDOM 요소로 이동합니다.Angular의 공식 문서 페이지에서 더 자세히 볼 수 있습니다.
RC5 픽스
돼요.import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' 을에 추가합니다.directives@Component이치노
부분을 또 다른 formControlName="name"폼으로 입력해 주세요.
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 { }
네, "폼은 '폼'의 기존 속성이 아니기 때문에 '폼 그룹'에 바인딩할 수 없습니다."라는 해결책을 찾았습니다.
제 경우 여러 모듈 파일을 사용하고 있으며, app.module.ts에 Reactive Forms Module을 추가했습니다.
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 {}
reactive Forms Module을 app.module.ts에 추가하면 기본적으로 reactive Forms Module은 author.module과 같은 모든 자모듈에 상속됩니다.(스위스!모든 지시사항을 작동시키기 위해 author.module.ts에 Reactive Forms Module을 Import해야 했습니다.
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
imports: [
...,
FormsModule, //added here too
ReactiveFormsModule //added here too
],
declarations: [...],
providers: [...]
})
export class AuthorModule {}
따라서 서브모듈을 사용하는 경우 각 서브모듈 파일에 Reactive Forms Module을 Import해야 합니다.
컴포넌트의 유닛 테스트 중에 이 에러가 발생했습니다(테스트 중에 어플리케이션 내에서만 정상적으로 동작).은 '수입하다'입니다.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();
}));
});
- 이동처: app.disc.ts
- Import : [ ]Reactive Forms Module ]
- 추가: '@angular/forms'에서 {Reactive Forms Module}을(를) 가져옵니다.
- 다음과 같이 표시됩니다.
mport { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
],
imports: [
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }오류는 이 모듈에서 Form Group이 인식되지 않음을 나타냅니다.따라서 Form Group을 사용하는 모든 모듈에 이러한 (아래) 모듈을 Import해야 합니다.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
그런 다음 FormsModule 및 ReactiveFormsModule을 모듈의 Import 배열에 추가합니다.
imports: [
FormsModule,
ReactiveFormsModule
],
App Module에 이미 추가해서 상속받아야 한다고 생각하실 수도 있습니다.하지만 그렇지 않습니다.이러한 모듈은 모듈 Import에서만 사용할 수 있는 필수 디렉티브를 내보내고 있기 때문입니다.자세한 내용은 공유 모듈을 참조하십시오.
이러한 오류의 다른 요인은 다음과 같은 철자 오류일 수 있습니다.
[양식 그룹]="양식" 작은 f 대신 대문자 F
[formsGroup]="form" 양식 뒤에 s 추가
Angular 4에서는 제안하신 답변이 통하지 않았습니다.대신 다른 방법으로 Atribute Binding을 사용해야 했습니다.attr★★★★★★★★★★★★★★★★★★:
<element [attr.attribute-to-bind]="someValue">
2개의 모듈을 Import해야 하는 경우 다음과 같이 추가합니다.
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]
})
우선 Angular versions > 2와는 관계가 없습니다.다음 내용을 app.module.ts 파일로 Import하면 문제가 해결됩니다.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
그런 다음 FormsModule 및 ReactiveFormsModule을 Import 배열에 추가합니다.
imports: [
FormsModule,
ReactiveFormsModule
],
주의: Import도 가능합니다.ReactiveFormsModule합니다.app.module.ts
「 모듈 「기능 모듈」로 Import 할 필요가 「기능 모듈」에 Import 하고 라도, 「 모듈」로 할 .AppModule 각도:
모듈은 다른 모듈에서 선언된 구성 요소, 지침 또는 파이프에 대한 액세스를 상속하지 않습니다.AppModule이 가져오는 것은 ContactModule과 무관하며 그 반대도 마찬가지입니다.Contact Component가 [(ngModel)]와 바인드하기 전에 ContactModule이 FormsModule을 Import해야 합니다.
https://angular.io/docs/ts/latest/guide/ngmodule.html
Angular 7에서도 같은 문제가 있었습니다.app.module.ts 파일에 팔로우만 Import하면 됩니다.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
그런 다음 FormsModule 및 ReactiveFormsModule을 Import 배열에 추가합니다.
imports: [
FormsModule,
ReactiveFormsModule
],
이 문제는 Forms Module, Reactive Forms Module Import 누락으로 인해 발생합니다.저도 같은 문제를 안고 왔습니다.모듈로 작업하다 보니 제 경우는 달랐습니다.그래서 나는 부모 모듈에서의 위의 Import를 놓쳤지만 자녀 모듈로 Import를 했지만 작동하지 않았다.
그 후 아래와 같이 부모 모듈로 Import하여 동작했습니다!
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [MyComponent]
})
Angular 버전은 11+이고 Visual Studio Code를 사용하시나요?
당신은 수입했습니다.
FormsModule,ReactiveFormsModule예를 들어, 내 수입 섹션에 추가했습니다.app.module.ts수 , : (모듈은 다를 수 있습니다.)의
// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
...
FormsModule,
ReactiveFormsModule,
...
],
- 올바른 Import(가끔 비슷한 이름의 다른 lib가 있을 수 있음)를 가지고 있으며 컴포넌트에 폼을 정의하고 초기화했습니까?
// MyWonderfulComponent (excerpt)
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyWonderfulComponent implements OnInit {
form: FormGroup;
...
constructor (private fb: FormBuilder) {
this.form = this.fb.group({
// DON'T FORGET THE FORM INITIALISATION
});
}
- Component-Template에는 다음과 같은 양식이 있습니다.
<form [formGroup]="form" (ngSubmit)="submit()">
<!-- MY FORM CONTROLS ARE ALREADY HERE -->
</form>
- 그리고 에러 메세지가 표시되는 것은, 「...」의 기존의 속성이 아니기 때문입니다.
Visual Studio Code 를 재기동하기만 하면 됩니다. : )
나처럼 멍청하게 굴지 마.위와 같은 에러가 발생하여 이전 답변의 옵션이 모두 작동하지 않았습니다.그리고 나는 내가 'F'를 대문자로 썼다는 것을 깨달았다.FormGroup 도!
대신:
[FormGroup]="form"
작업:
[formGroup]="form"
심플한 솔루션:
순서 1: Reactive Form Module 가져오기
import {ReactiveFormsModule} from '@angular/forms';
순서 2: Import 섹션에 "Reactive Forms Module" 추가
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 { }
e2e 테스트를 하려고 할 때 이 오류를 발견했는데 이에 대한 답이 없다는 것이 나를 미치게 했다.
테스트 중인 경우 *.specs.ts 파일을 찾아 다음을 추가합니다.
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
이 오류에 대한 이러한 스레드를 탐색하는 사람들을 위한 것입니다.제 경우 공유 모듈이 있었는데 Forms Module과 Reactive Forms Module만 내보내고 Import를 잊어버렸습니다.이로 인해 폼 그룹이 하위 구성 요소에서 작동하지 않는다는 이상한 오류가 발생했습니다.이것이 사람들이 머리를 긁는 데 도움이 되기를 바란다.
컴포넌트를 개발할 때 이 문제가 발생할 경우 가장 가까운 모듈에 다음 2개의 모듈을 추가해야 합니다.
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();
});
});
주의: 로더에 주의하여 최소화하십시오(레일 환경:
이 오류를 보고 모든 해결책을 시도해 본 후, 저는 제 html 로더에 문제가 있다는 것을 깨달았습니다.
로더를 Rails HTML 경로 Import).config/loaders/html.js.
module.exports = {
test: /\.html$/,
use: [ {
loader: 'html-loader?exportAsEs6Default',
options: {
minimize: true
}
}]
}
몇 시간 동안의 노력과 수많은 Reactive Forms Module Import 후, 저는 제 기능을 볼 수 있었습니다.formGroup글씨였습니다.formgroup.
그 결과 로더에 접속하여 HTML을 최소화할 수 있게 되었습니다.
옵션을 바꾼 후 모든 것이 정상 작동했고, 나는 다시 울음을 터뜨릴 수 있었다.
이 질문에 대한 답변이 아니라는 것은 알지만, 향후 Rails 방문자(및 커스텀 로더를 사용하는 다른 고객)에게 도움이 될 것입니다.
Reactive Forms Module을 app.module.ts로 Import하여 등록합니다.
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.xx 파일-
<form [formGroup]="profileForm">
<label>
First Name:
<input type="text" formControlName = "firstName">
</label>
<label>
Last Name:
<input type="text" formControlName = "lastName">
</label>
</form>
실수로 [Form Group]의 [Form Group]을 입력했습니다..html에서 맞춤법을 확인합니다..html 파일에 오류가 발생해도 컴파일 시간 오류가 발생하지 않습니다.
나는 여기서 거의 모든 해결책을 시도했지만 나의 문제는 조금 달랐다.라우팅 모듈에 컴포넌트를 추가했지만 메인 모듈은 포함하지 않았습니다.따라서 컴포넌트가 모듈의 일부인지 확인합니다.
REFACTIVE_FORM_DIRECTIVES 사용 및 Import:
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 { }
저도 같은 문제가 있었어요.서브모듈을 사용하는 경우(예를 들어 app.component.module.ts뿐만 아니라 login.module.ts 등의 컴포넌트가 별도로 존재하며, 이 login.module.ts Import에 Reactive FormsModule import가 포함되어 있는지 확인합니다.모든 것에 서브모듈을 사용하고 있기 때문에 Reactive Forms Module을 app.component.module로 Import할 필요도 없습니다.
파일 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 {}
그ReactiveFormsModule그리고.FormsModuleImport는 커스텀컴포넌트 모듈 및 호출원 부모 컴포넌트에 추가해야 합니다.
예를 들어 필터 구성 요소에 대한 양식을 추가해야 했습니다.따라서 이 Import를 필터 모듈 및 이 필터 버튼을 클릭하는 부모 페이지(리스트일 수 있음) 모듈에 추가해야 합니다.
참고: 하위 모듈의 구성 요소 내에서 작업하는 경우 가져오기만 하면 됩니다.ReactiveFormsModule상위 앱 루트 모듈이 아닌 하위 모듈로 이동합니다.
대응하는 모듈에서 Reactive Forms Module을 Import합니다.
이것이 TypeScript 오류일 뿐이지만 폼의 모든 것이 동작하는 경우는, IDE 를 재기동할 필요가 있습니다.
모달(엔트리 컴포넌트)에 formGroup이 있는 경우 모달 인스턴스화 모듈에도 Reactive Forms Module을 Import해야 합니다.
'@angular/forms'에서 { FormsModule, ReactiveFormsModule }을(를) 가져온 후 app-module.ts 파일의 가져오기 배열에 추가합니다.
는, Import 되어 됩니다.FormsModule ★★★★★★★★★★★★★★★★★」ReactiveFormsModule컴포넌트를 하고 있습니다).[formGroup]에서 (directive)로.declarations어레이를 설정합니다., ★★★★★★★★★★★★★★★★★★.Can't bind to 'formGroup' since it isn't a known property of 'form'에러 메시지
언급URL : https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form
'it-source' 카테고리의 다른 글
| 쇼트 코드 출력 추가쇼트 코드 출력 추가새 줄 뒤에새 줄 뒤에 (0) | 2023.02.16 |
|---|---|
| Oracle insert(존재하지 않는 경우) 문 (0) | 2023.02.16 |
| 각도 구성 요소: 템플릿 바꾸기 옵션이 없습니까? (0) | 2023.02.16 |
| 다운로드 기능이 asp.net 업데이트 패널 내에서 작동하지 않음 (0) | 2023.02.16 |
| Nginx의 다중 사이트 WordPress 다시 쓰기 규칙 (0) | 2023.02.16 |