I'm facing an issue while trying to create an edit button for a formGroup that is initially saved. When the user clicks on the adjacent button, a modal should open with editable data. However, I encountered this error and haven't been able to resolve it yet. I would appreciate any help from the community.
ERROR Message: Unable to access property 'startDate' of undefined
Note: The code snippet may not be executable here, but it was the most convenient way to share my code.
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
@Component({
selector: 'app-project-information-detail-edit',
templateUrl: './project-information-detail-edit.component.html',
})
export class ProjectInformationDetailEditComponent implements OnInit {
detailForm : FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.detailForm = this.fb.group({
name: [''],
phone: [''],
startDate: [''],
email: [''],
});
}
}<form [formGroup]="detailForm">
<div class="col-sm-6">
<h1><span class="semi-bold">{{selectedProject.name}}</span>
<br>
<small *ngIf="selectedProject.startDate">
{{selectedProject.startDate}}
</small>
<ng-template #noStartdate>
<span>Not set</span>
</ng-template>
</h1>
<ul class="list-unstyled">
<li>
<p class="text-muted">
<i class="fa fa-phone"></i>  
<span *ngIf="selectedProject.phone">
<a href="tel:{{selectedProject.phone}}">{{selectedProject.phone}}</a>
</span>
<ng-template #noPhoneTemplate>
<span>Not available</span>
</ng-template>
</p>
</li>
<li>
<p class="text-muted">
<i class="fa fa-envelope"></i>  
<a *ngIf="selectedProject.email"
href="mailto:{{selectedProject.email}}">{{selectedProject.email}}</a>
<ng-template #noPhoneTemplate>
<span>Not available</span>
</ng-template>
</p>
</li>
</ul>
</div>
</form>ERROR TypeError: Cannot read property 'startDate' of undefined
at Object.eval [as updateDirectives] (ProjectInformationDetailEditComponent.html:9)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655)
at checkAndUpdateView (core.js:13802)
at callViewAction (core.js:14153)
at execComponentViewsAction (core.js:14085)
at checkAndUpdateView (core.js:13808)
at callWithDebugContext (core.js:15056)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14593)
at ViewRef_.detectChanges (core.js:11577)
at eval (core.js:5907)
enter code here