我一直在尝试将 FormGroup 添加到我的 editproject.page.ts 中,这是控制台向我抛出的错误。
core.js:4197 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined
TypeError: Cannot read property 'id' of undefined
at registerNgModuleType (core.js:24134)
at core.js:24145
at Array.forEach (<anonymous>)
at registerNgModuleType (core.js:24145)
at new NgModuleFactory$1 (core.js:24242)
at Compiler_compileModuleSync__POST_R3__ (core.js:27027)
at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:27032)
at MergeMapSubscriber.project (router.js:3463)
at MergeMapSubscriber._tryNext (mergeMap.js:46)
at MergeMapSubscriber._next (mergeMap.js:36)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27425)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)
我的项目-edit.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ProjectEditPageRoutingModule } from './project-edit-routing.module';
import { ProjectEditPage } from './project-edit.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ProjectEditPageRoutingModule,
FormGroup,
FormBuilder,
Validators
],
declarations: [ProjectEditPage]
})
export class ProjectEditPageModule {}
我的项目-edit.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/Project';
import { ClientsService } from 'src/app/services/clients.service';
import { ProjectService } from 'src/app/services/project.service';
import { DataService } from 'src/app/services/data.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-project-edit',
templateUrl: './project-edit.page.html',
styleUrls: ['./project-edit.page.scss'],
})
export class ProjectEditPage implements OnInit {
editionForm: FormGroup;
project: Project;
constructor(private formBuilder: FormBuilder, public projectService: ProjectService, private route: ActivatedRoute, private clientService: ClientsService, private router: Router, private dataService: DataService) {
this.project = new Project();
}
ngOnInit() {
this.editionForm = this.formBuilder.group({
projectName: ['', Validators.required],
});
if (this.route.snapshot.data['project']) {
this.project = this.route.snapshot.data['project'];
}
}
我的项目-edit.page.html
<ion-header>
<ion-toolbar>
<ion-title>Edición de Proyecto</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<section class="createform">
<form [formGroup]="this.editionForm" (ngSubmit)="update()" >
<!-- <section class="formfields">
<ion-label>Nombre:</ion-label>
<ion-input type="string" placeholder="Nombre Proyecto" formControlName="projectName" required>
</ion-input>
</section> -->
<!-- <div style="color: red;" *ngIf="!createform.controls.projectName.valid &&
createform.controls.projectName.touched" class="validator-error">
Please enter a valid project name.
</div>-->
</form>
</section>
</ion-content>
我的 project.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProjectRoutingModule } from './project-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { AddProjectComponent } from './add-project/add-project.component';
import { IonicModule } from '@ionic/angular';
import { ListProjectComponent } from './list-project/list-project.component';
import { ProjectComponent } from './project/project.component';
import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
imports: [
CommonModule,
ProjectRoutingModule,
ReactiveFormsModule,
MatIconModule,
MatButtonModule,
MatFormFieldModule,
MatInputModule,
MatDialogModule,
FormsModule,
MatSnackBarModule,
IonicModule,
SharedModule,
],
entryComponents: [AddProjectComponent, ListProjectComponent],
declarations: [AddProjectComponent, ListProjectComponent, ProjectComponent],
exports: [ListProjectComponent]
})
export class ProjectModule { }
我不知道我错过了什么。在此有关错误消息的问题之前,我在将 Form 导入到我的 module.ts 时遇到了问题。由于我现在遇到的这个错误,我无法判断该错误是否已修复。我相信如果此错误消息得到纠正,整个事情都会正常进行。 欢迎任何答案,并感谢您的回答。