错误-不能绑定到“窗体组”，因为它不是“窗体”的已知属性[重复]

Question

我想在离子页面上做一个表单，但我有那个错误。图像误差

我一直在搜索这个问题，更流行的解决方案是导入ReactiveFormsModule，但正如您所看到的，它是正确导入的。怎么会有问题呢？

表单位于一个页面（editpage）中，该页面作为模式从tab2页面启动。

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(){

  }
}

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

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

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

@NgModule({
  ...
})

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

export class EditpagePageModule {
  constructor(){}

从app.module.ts删除formsmodule，reactiveformsmodule从导入中删除

在app.module.ts中导入EditPagePageModule