Question

我无法在Angular 8 / Ionic 4 App中使用反应形式。每次遇到此错误：

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

我尝试了一些堆栈解决方案，但没有解决方案。这是我使用的代码：

我的app.module

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>

Page.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);
    }

    }

我尝试这个：Can't bind to 'formGroup' since it isn't a known property of 'form' 但仍然是相同的错误。

我做错了什么？

谢谢。

Answer 1

您的代码没有任何问题，我使用它创建了一个堆栈闪电，一切正常 https://stackblitz.com/edit/angular-rvpfj1

我假设这是问题所在，因为您正在延迟加载页面，而页面模块中没有包含表单模块。

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

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

Answer 2

不要在组件构造器中构造表单（通常来说，除了注入之外，不要管constructor）。 ngOnInit是实例化表单的地方

无法绑定到“ formGroup”，因为它不是“ form”的已知属性-Angular 8 Ionic 4

我的app.module

页面HTML

Page.ts

2 个答案: