Не удается привязать к "formGroup", так как это не является известным свойством "form"
СИТУАЦИЯ:
пожалуйста, помогите! Я пытаюсь сделать то, что должно быть очень простой формой в моем приложении 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 { }
ВОПРОС:
Почему я получаю эту ошибку?
Я что-то пропустила?
12 ответов
ПРОЕКТ RC5 ИСПРАВИТЬ
вам нужно import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'
в вашем контроллере и добавьте его в directives
на @Component
. Это решит проблему.
после того как вы исправить это, вы, вероятно, получите еще одну ошибку, потому что вы не добавить formControlName="name"
для ввода в форму.
RC6/RC7 / Final release 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
является селектором для директивы с именем FormGroupDirective
это часть ReactiveFormsModule
, следовательно, необходимо импортировать его. Он используется для привязки существующего FormGroup
к элементу DOM. Вы можете прочитать больше об этом на официальная страница документов 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 { }
Ok после некоторого рытья я нашел решение для "не могу привязаться к "formGroup", поскольку это не известное свойство "form"."
для моего случая я использовал несколько файлов модулей, я добавил ReactiveFormsModule в app.модуль.ТС
import { FormsModule, ReactiveFormsModule } from '@angular/forms';`
@NgModule({
declarations: [
AppComponent,
]
imports: [
FormsModule,
ReactiveFormsModule,
AuthorModule,
],
...
но это не работало, когда я использую директиву [formGroup] из компонента, добавленного в другой модуль, например, используя [formGroup] в author.деталь.ts, который подписан в author.модуль.файл ТС:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthorComponent } from './author.component';
@NgModule({
imports: [
CommonModule,
],
declarations: [
AuthorComponent,
],
providers: [...]
})
export class AuthorModule {}
Я думал если я добавил ReactiveFormsModule в приложение.модуль.ts, по умолчанию ReactiveFormsModule будет унаследован всеми его дочерними модулями, такими как author.модуль в этом случае... (неверно!). Мне нужно было импортировать ReactiveFormsModule в author.модуль.ТС для того, чтобы сделать все директивы для работы:
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
imports: [
...,
FormsModule, //added here too
ReactiveFormsModule //added here too
],
declarations: [...],
providers: [...]
})
export class AuthorModule {}
Итак, если вы используете подмодули, обязательно импортируйте ReactiveFormsModule в каждый файл подмодуля. Надеюсь, это поможет кому-нибудь.
предложенный ответ не работал для меня с 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]
})
я столкнулся с этой ошибкой во время модульного тестирования компонента (только во время тестирования, в приложении он работал нормально). Решение заключается в импорте ReactiveFormsModule
на :
// Import module
import { ReactiveFormsModule } from '@angular/forms';
describe('MyComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [ReactiveFormsModule], // Also add it to 'imports' array
})
.compileComponents();
}));
});
имейте в виду, что если вы определили "модули функций", вам нужно будет импортировать в модуль функций, даже если вы уже импортировали в AppModule
. Из угловой документации:
модули не наследуют доступ к компонентам, директивам или каналам, объявленным в других модулях. Какой модуль импорта не имеет отношения к ContactModule и наоборот. Прежде чем ContactComponent сможет связываться с [(ngModel)], его ContactModule должен импортировать FormsModule.
для людей, прогуливающихся по этим потокам об этой ошибке. В моем случае у меня был общий модуль, где я экспортировал только FormsModule и ReactiveFormsModule и забыл импортировать его. Это вызвало странную ошибку, что formgroups не работает в суб компонентов. Надеюсь, это поможет людям почесать в затылке.
эта проблема возникает из-за отсутствия импорта FormsModule,ReactiveFormsModule .Я тоже пришел с той же проблемой. Мое дело было другим. как я работал с модулями.Поэтому я пропустил выше импорта в моих родительских модулях, хотя я импортировал его в дочерние модули, он не работал.
затем я импортировал его в свои родительские модули, как показано ниже, и он работал!
import { ReactiveFormsModule,FormsModule } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [MyComponent]
})
я столкнулся с этой ошибкой при попытке сделать тестирование e2e, и это сводило меня с ума, что на это нет ответов.
ЕСЛИ ВЫ ПРОВОДИТЕ ТЕСТИРОВАНИЕ,найти свой *.характеристики.файл TS и добавить :
import {ReactiveFormsModule, FormsModule} from '@angular/forms';
небольшое примечание: будьте осторожны с загрузчиками и минимизируйте (Rails env.):
увидев эту ошибку и попробовав каждое решение, я понял, что что-то не так с моим загрузчиком html.
Я установил среду Rails для импорта HTML-путей для моих компонентов успешно с помощью этого загрузчика (config/loaders/html.js.
):
module.exports = {
test: /\.html$/,
use: [ {
loader: 'html-loader?exportAsEs6Default',
options: {
minimize: true
}
}]
}
после нескольких часов усилий и бесчисленных импорта ReactiveFormsModule я увидел, что мой formGroup
был маленьким письма:formgroup
.
это привело меня к загрузчику и тот факт, что он downcased мой HTML на минимизации.
после изменения параметров все работало так, как должно, и я снова мог плакать.
Я знаю, что это не ответ на вопрос, но для будущих посетителей Rails (и других с пользовательскими загрузчиками) я думаю, что это может быть полезно.
Can't bind to 'formGroup' since it isn't a known property of 'form'
означает, что вы пытаетесь связать свойство с помощью angular ([prop]
) но угловой не может найти ничего, что он знает для этого элемента (в этом случае form
).
это может произойти, не используя правильный модуль (отсутствует импорт где-то в пути), а иногда просто вызвать опечатку, как:
[formsGroup]
С s
после form