错误-无法绑定到“ formGroup”，因为它不是“ form”的已知属性

Question

我想在一个离子页面上做一个表格，但是有这个错误。 Image error

我一直在搜索问题，更流行的解决方案是import ReactiveFormsModule，但是如您所见，它已正确导入。问题怎么了？

该表单位于一个页面（编辑页面）中，该页面是从tab2页面以模式启动的。

控制器（editpage.page.ts）：

import { Component, OnInit, Input } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-editpage',
  templateUrl: './editpage.page.html',
  styleUrls: ['./editpage.page.scss'],
})
export class EditpagePage implements OnInit {
  public todoForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
    navParams: NavParams,
    public modalController: ModalController) {
  }

  ngOnInit() {
    this.todoForm = this.formBuilder.group({
      title: ['', Validators.required],
      description: ['']
    });
  }

public addNote(){

  }
}

html格式：

<form [formGroup]="todoForm" (ngSubmit)="addNote()">
    <ion-item>
      <ion-label>TODO</ion-label>
      <ion-input type="text" formControlName="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>DESCRIPCION</ion-label>
      <ion-textarea formControlName="description"></ion-textarea>
    </ion-item>
    <ion-button shape="round" color="primary" fill="solid" type="submit" >Agregar
    </ion-button>
  </form>

Editpage.module.ts

import { Component, Input, NgModule } from '@angular/core';
import { NavParams, IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { EditpagePage } from './editpage.page';
import { CommonModule } from '@angular/common';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [EditpagePage]
})
@Component({
  selector: 'modal-page',
})

export class EditpagePageModule {
  constructor(){}
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from 'src/environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    FormsModule,
    ReactiveFormsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Flashlight,
    Geolocation
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

1. 从组件中删除导入：

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

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

1. 从Editpage.module.ts中删除@Component装饰器

@NgModule({
  ...
})

// REMOVE THIS:
@Component({
  selector: 'modal-page',
})

export class EditpagePageModule {
  constructor(){}

1. 从app.module.ts中将FormsModule, ReactiveFormsModule从导入中删除

2. 在app.module.ts中导入EditpagePageModule

这是一个最小的堆叠闪电：https://stackblitz.com/edit/angular-u2g3wn

一旦您执行了这些操作，示例中就会发生很多事情，如果仍然无法执行，我建议您发布一个stackblitz示例。