Невозможно привязать к «formGroup», так как это неизвестное свойство «формы» - Angular 8 Ionic 4

Я не могу использовать реактивные формы в своем приложении Angular 8/Ionic 4. Каждый раз, когда я получаю эту ошибку:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Template     parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'.

Я пробую несколько решений из стека, но без решения для меня. Вот код, который я использую:

Мой модуль приложения

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [], 
  imports: [
    BrowserModule,
    FormsModule, ReactiveFormsModule, // Forms
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}'

HTML-код страницы

<form [formGroup]="addGame" (ngSubmit)="onSubmit()">
    <ion-item>
        <ion-label>Name</ion-label>
        <ion-input id="name" type="text" formControlName="name"></ion-input>
    </ion-item> 

    <ion-item>
        <ion-label>Title</ion-label>
        <ion-input id="title" type="text" formControlName="title"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Url</ion-label>
        <ion-input id="url" type="text" formControlName="url"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Game ID (Intern)</ion-label>
        <ion-input id="gameid" type="text" formControlName="gameid"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Image</ion-label>
        <ion-input id="image" type="text" formControlName="image"></ion-input>
    </ion-item>
</form>

Страница.ts

import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';

    import { Router } from '@angular/router';

    import { GamesService } from '../../services/games/games.service';


    @Component({
    selector: 'app-add-game',
    templateUrl: './add-game.page.html',
    styleUrls: ['./add-game.page.scss'],
    })
    export class AddGamePage implements OnInit {

    addGame: FormGroup;

    constructor(
        private games: GamesService,
        private route: Router,
        formBuilder: FormBuilder
    ){
        this.addGame = formBuilder.group({
            name: [''],
            title: [''],
            url: [''],
            gameid: [''],
            image: ['']
        });
    }

    ngOnInit() {
        // ToDo : Add Vendor to form
        console.log('add new game');
    }

    onSubmit(customerData) {
        console.log(customerData);
    }

    }

Я пробую это: Не могу привязать к 'formGroup', так как это не известное свойство 'form', но все равно та же ошибка.

Что я делаю неправильно?

Заранее спасибо.


ionic-framework angular angular-reactive-forms formbuilder
person angUHLALA    schedule 31.08.2019    source источник
comment
вам нужно импортировать ReactiveFormsModule в module.ts, где вы также объявляете AddGamePage, а не только в app.module. angular.io/guide/sharing-ngmodules#sharing-modules   -  person Eliseo    schedule 31.08.2019
comment
Я пробую это с помощью следующего кода: import {Component, OnInit} from '@angular/core'; импортировать { FormGroup, FormControl, Validators, FormBuilder } из '@angular/forms'; импортировать {FormsModule, ReactiveFormsModule} из '@angular/forms'; Но та же ошибка   -  person angUHLALA    schedule 31.08.2019
comment
Я хочу сказать. Если ваш компонент AddGamePage объявлен в модуле, вам нужно импортировать ReactiveFormsModule в модуль, где вы объявили компонент, а не в app.module - в вашем app.module ваш не объявлен (в tag declare:[...] ) этот компонент - я полагаю, вы объявляете компонент в другом модуле. В этом модуле вам нужно импортировать ReactiveFormsModule (не в компонент). На самом деле это не обязательно в AppModule   -  person Eliseo    schedule 31.08.2019
comment
Протестировал код на stackblitz и работает нормально, см. ссылку и ответ ниже. Предположим, что это просто проблема с импортом, как упоминал @eliseo.   -  person chrismclarke    schedule 31.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

В вашем коде нет ничего плохого, я создал с его помощью stackblitz, и все работает нормально https://stackblitz.com/edit/angular-rvpfj1

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

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

@NgModule({
  imports: [
    // other imports ...
    FormsModule, ReactiveFormsModule,
  ],
})
export class PageModule { }
person chrismclarke    schedule 31.08.2019

arrow_upward
0
arrow_downward

Не создавайте свою форму в конструкторе компонентов (и, вообще говоря, оставьте constructor в покое, за исключением инъекции). ngOnInit - это место, где вы должны создать экземпляр формы для своего компонента.

person aherve    schedule 31.08.2019
comment
Все та же ошибка, когда я помещаю FormBuilder.group в NgInit - person angUHLALA; 31.08.2019
comment
Нет причин ждать инициализации компонента для построения формы. Совершенно нормально сделать это в конструкторе (или, чаще, как свойство класса инициализатора). - person Lazar Ljubenović; 31.08.2019