Невозможно привязать к 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 { }

ВОПРОС:

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

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

RC5 FIX

Вам нужно 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это селектор для директивы named, FormGroupDirectiveкоторая является частью ReactiveFormsModule, отсюда и необходимость ее импорта. Он используется для привязки существующего FormGroupк элементу DOM. Вы можете прочитать больше об этом на официальной странице документации Angular .

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

Хорошо, после некоторого поиска я нашел решение для «Не могу связать с« 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 в каждый файл субмодуля. Надеюсь, это кому-нибудь поможет.

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

Модули не наследуют доступ к компонентам, директивам или каналам, которые объявлены в других модулях. Что импортирует 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: [
  FormsModule,
  ReactiveFormsModule
],

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

Другие факторы для этих ошибок могут быть ошибкой заклинания как ниже ...

[FormGroup] = "форма" Капитал F вместо малого F

[formsGroup] = "form" Дополнительные s после формы

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

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

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

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';

Небольшое примечание: будьте осторожны с загрузчиками и минимизируйте (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 (и других с пользовательскими загрузчиками) я думаю, что это может быть полезно.

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

Импортируйте и зарегистрируйте 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.

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

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

Вместо:

[FormGroup]="form"

Делать:

[formGroup]="form"

если это просто ошибка машинописного текста, но все в вашей форме работает, возможно, вам просто нужно перезапустить IDE

У меня была та же проблема, убедитесь, что при использовании подмодулей (например, у вас есть не только app.component.module.ts, но у вас есть отдельный компонент, такой как login.module.ts, что вы включаете импорт ReactiveFormsModule в этот логин Импорт .module.ts , чтобы он работал. Мне даже не нужно импортировать ReactiveFormsModule в мой app.component.module, потому что я использую субмодули для всего.

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

Может помочь кому-то:

если у вас есть formGroup в модальном (entrycomponent), тогда вы должны импортировать 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'.

Во-первых, это не относится к угловым версиям> 2 . Просто импортируйте следующее в ваш файл app.module.ts, чтобы решить проблемы.

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],

Примечание : вы также можете импортировать ReactiveFormsModuleв определенный модуль вместоapp.module.ts

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