Initially, I had a functional code in Angular 12 implemented with a reactive form. When transitioning to Angular 14 for a new project, I researched the updated validation features and adjusted my code accordingly. However, upon testing, I encountered a series of errors as shown in the console:
Form value
{names: 'ddddddd', lastNames: 'sssssssssss', photoLocation: 'dddddd', married: 1, hasBrothersOrSisters: 0, …}
dateOfBirth
:
"2023-01-07"
hasBrothersOrSisters
:
0
lastNames
:
"sssssssssss"
married
:
1
names
:
"ddddddd"
photoLocation
:
"dddddd"
ERROR TypeError: Cannot read properties of undefined (reading 'errors')
success (indicating successful data save)
{idEmployee: 9, names: 'ddddddd', lastNames: 'sssssssssss', photoLocation: 'dddddd', married: 1, …}
dateOfBirth
:
"2023-01-07T00:00:00"
hasBrothersOrSisters
:
0
idEmployee
:
9
lastNames
:
"sssssssssss"
married
:
1
names
:
"ddddddd"
photoLocation
:
"dddddd"
[[Prototype]]
:
Object
ERROR TypeError: Cannot read properties of undefined (reading 'errors')
ERROR TypeError: Cannot read properties of undefined (reading 'errors')
Below is the corresponding HTML snippet
<div class="abs-center">
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<!-- Form fields omitted for brevity -->
</form>
</div>
Accompanying TypeScript (.ts) file
import { Component, OnInit } from '@angular/core';
// Additional imports and setup related to Angular forms
@Component({
selector: 'app-save-employee',
templateUrl: './save-employee.component.html',
styleUrls: ['./save-employee.component.css']
})
export class SaveEmployeeComponent implements OnInit {
// Properties and methods definitions here
}
Despite reviewing various examples, the issue persists. I made changes to handle potential null values more strictly. Could there be an element overlooked? Any thoughts or insights on this?