Невозможно связать с 'formGroup', поскольку это не известное свойство 'form'

СИТУАЦИЯ:

Пожалуйста, помогите! Я пытаюсь сделать то, что должно быть очень простой формой в моем приложении Angular2, но независимо от того, что он никогда не работает.

ANGULAR ВЕРСИЯ:

ANGULAR 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 { }

ВОПРОС:

Почему я получаю эту ошибку?

Я что-то пропустил?

Ответ 1

RC5 FIX

Вам нужно import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' в вашем контроллере и добавить его в directives в @Component. Это устранит проблему.

После того, как вы исправите это, вы, вероятно, получите еще одну ошибку, потому что вы не добавили formControlName="name" к вашему вводу в форме.

RC6/RC7/Final release FIX

Чтобы исправить эту ошибку, вам просто нужно импортировать ReactiveFormsModule из @angular/forms в свой модуль. Вот пример базового модуля с ReactiveFormsModule 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 { }

Далее, formGroup является селектором директивы с именем FormGroupDirective, который является частью ReactiveFormsModule, поэтому необходимо импортировать его. Он используется для привязки существующего formGroup к элементу DOM. Подробнее об этом можно узнать на странице Angular официальных документов.

Ответ 2

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 { }

Ответ 3

Хорошо после некоторого рытья я нашел решение для "Не могу привязываться к" formGroup ", так как это не известное свойство" формы "."

В моем случае я использовал несколько файлов модулей, я добавил ReactiveFormsModule в app.module.ts

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

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

Но это не сработало, когда я использую директиву [formGroup] из компонента, добавленного в другом модуле, например. используя [formGroup] в author.component.ts, подписанный в файле author.module.ts:

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 в app.module.ts, по умолчанию ReactiveFormsModule наследуется всеми его дочерними модулями, такими как author.module, в этом случае... (неправильно!). Мне нужно было импортировать ReactiveFormsModule в author.module.ts, чтобы заставить все директивы работать:

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

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

export class AuthorModule {}

Итак, если вы используете подмодули, обязательно импортируйте ReactiveFormsModule в каждый файл подмодуля. Надеюсь, это поможет любому.

Ответ 4

Я столкнулся с этой ошибкой во время модульного тестирования компонента (только во время тестирования, в приложении он работал нормально). Решение состоит в том, чтобы импортировать файл 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();
    }));
});

Ответ 5

Предложенный ответ не работает для меня с Angular 4. Вместо этого мне пришлось использовать другой способ привязки атрибута с префиксом attr:

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

Ответ 6

Если вам нужно импортировать два модуля, добавьте это ниже

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]
})

Ответ 7

Помните, что если вы определили "Модули компонентов", вам необходимо будет импортировать их в модуль AppModule, даже если вы уже импортировали его в AppModule. Из угловой документации:

Модули не наследуют доступ к компонентам, директивам или каналам, которые объявлены в других модулях. То, что импортирует AppModule, не имеет отношения к ContactModule и наоборот. Прежде чем ContactComponent сможет связываться с [(ngModel)], его ContactModule должен импортировать FormsModule.

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

Ответ 8

У меня была такая же проблема с Angular 7. Просто импортируйте следующее в ваш файл app.module.ts.

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

Затем добавьте FormsModule и ReactiveFormsModule в ваш массив импорта.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Ответ 9

Эта проблема возникает из-за отсутствия импорта FormsModule, ReactiveFormsModule. Я также пришел с той же проблемой. Мой случай был другим. так как я работал с модулями. Так что я пропустил выше импорт в моих родительских модулях, хотя я импортировал его в дочерние модули, он не работал.

Затем я импортировал его в мои родительские модули, как показано ниже, и это сработало!

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

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

Ответ 10

Для людей, прогуливающих эти потоки об этой ошибке. В моем случае у меня был общий модуль, в котором я экспортировал только FormsModule и ReactiveFormsModule и забыл его импортировать. Это вызвало странную ошибку, что formgroups не работали в подкомпонентах. Надеюсь, это поможет людям почесывать головы.

Ответ 11

Я сталкивался с этой ошибкой при попытке тестирования e2e, и это сводило меня с ума, что на это не было ответов.

ЕСЛИ ВЫ ИДЕТЕ ИСПЫТАНИЕ, найдите свой файл *.specs.ts и добавьте:

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

Ответ 12

Небольшое примечание: будьте осторожны с загрузчиками и минимизируйте (Rails env.):

Увидев эту ошибку и попробовав каждое решение, я понял, что что-то не так с моим загрузчиком HTML.

Я настроил мою среду Rails так, чтобы успешно импортировать пути HTML для моих компонентов с помощью этого загрузчика (config/loaders/html.js.):

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

После нескольких часов усилий и бесчисленных импортов ReactiveFormsModule я увидел, что моя formGroup была маленькими буквами: formgroup.

Это привело меня к загрузчику и к тому, что он уменьшил мой HTML при сворачивании.

После изменения параметров все работало как надо, и я снова мог плакать.

Я знаю, что это не ответ на вопрос, но для будущих посетителей Rails (и других с пользовательскими загрузчиками) я думаю, что это может быть полезно.

Ответ 13

использование и импорт 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 { }

Ответ 14

Если у вас возникла эта проблема при разработке компонента, вы должны добавить эти два модуля в ближайший модуль:

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();
  });
});

Ответ 15

Импортируйте и зарегистрируйте ReactiveFormsModule в вашем app.module.ts.

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 file-

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

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

Я был по ошибке написал [FormGroup] insted из [formGroup]. Проверьте правильность написания в .html. Это не выдает ошибку времени компиляции. Если что-то не так в файле .html.

Ответ 16

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

означает, что вы пытаетесь связать свойство, используя angular ([prop]), но angular не может найти ничего, что он знает для этого элемента (в данном случае form).

это может произойти, если не использовать нужный модуль (пропуская импорт где-то в пути), а иногда просто вызвать опечатку, например:

[formsGroup], с s после form

Ответ 17

Не будь таким тупым, как я. Получала ту же ошибку, что и выше, ни один из параметров в этой теме не работал. Затем я понял, что я использовал заглавную букву "F" в FormGroup. Doh!

[FormGroup]="form"

Ответ 18

Ошибка говорит о том, что FormGroup не распознается в этом модуле. Таким образом, вы должны импортировать эти (ниже) модули в каждый модуль, который использует FormGroup

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

Затем добавьте FormsModule и ReactiveFormsModule в свой модуль массива импорта.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Возможно, вы думаете, что я уже добавил его в AppModule и должен наследовать от него? Но это не так. потому что эти модули экспортируют необходимые директивы, которые доступны только при импорте модулей. читайте больше здесь... https://angular.io/guide/sharing-ngmodules.

Ответ 19

Как только я добавил свой модуль в AppModule, все стало работать нормально.