Неможливо прив’язати до '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чи є селектор для директиви з ім'ям, 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 { } 

Добре, після деякого копання я знайшов рішення для "Не можу прив’язати до" formGroup ", оскільки це не відома властивість" form "."

Для мого випадку я використовував декілька файлів модулів, я додав 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 замість малих е

[formGroup] = "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 файл-

  <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 в дочірні модуль, а не батьківський корінний модуль додатка

Не будь тупим німим, як я. Отримала таку ж помилку, що і вище, NONE з варіантів цього потоку працював. Потім я зрозумів, що написав велику літеру "F" у FormGroup. До!

Замість:

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

Може допомогти комусь:

коли у вас є формаGroup в модалі (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, про який не було заявлено app.module.ts. Основний компонент був оголошений в app.module.tsі відкрив би діалоговий компонент, але діалоговий компонент не був явно оголошений в app.module.ts.

У мене не було проблем із звичайним використанням діалогового компонента, за винятком того, що форма викидала цю помилку кожного разу, коли я відкривав діалогове вікно.

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

Одного разу я додав свій модуль, щоб AppModuleвсе почало чудово працювати.