Trying to access the 'cpf' property of an undefined value is causing an error

I have a file that I'm using to create an object to store in my Firestore database. The file is imported into my register page, and I'm using ngModels to capture user-input values. To achieve this, I've initialized my data object inside the register page and created a variable named "Usuario" to hold the object from my file.

Below is the structure of my object:

export const data = {

    Document: {
        cpf: "",
        sus: "",
        birth_date: "",
        email: "",
        confirm_email: "",
        phone: "",
        password: "",
        confirm_password: ""
    }
};

Next, I import the file:

import * as myData from '../interface/patient.interface';

And then I instantiate myData class like so:

export class RegistrationPage {

Usuario = myData;

}

Afterwards, I retrieve and store the HTML input values like this:

  <ion-list>
        <ion-item>
            <ion-label floating>CPF</ion-label>
            <ion-input type="number" [(ngModel)]="Usuario.Document.cpf"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>SUS Card - CNS</ion-label>
            <ion-input type="number" [(ngModel)]="Usuario.Document.sus"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Date of Birth</ion-label>
            <ion-input type="text" [(ngModel)]="Usuario.Document.birth_date"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="email" [(ngModel)]="Usuario.Document.email"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Confirm Email</ion-label>
            <ion-input type="email" [(ngModel)]="Usuario.Document.confirm_email"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Mobile Phone with area code</ion-label>
            <ion-input type="tel" [(ngModel)]="Usuario.Document.phone"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password" [(ngModel)]="Usuario.Document.password"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Confirm Password</ion-label>
            <ion-input type="password" [(ngModel)]="Usuario.Document.confirm_password"></ion-input>
        </ion-item>

However, when I attempt to click the register button, I encounter the following error:

ERROR TypeError: Cannot read property 'cpf' of undefined

Answer №1

Just a few things to note:

export const information = {

    Document: {
        cpf: "",
        health_id: "",
        date_of_birth: "",
        email: "",
        repeat_email: "",
        phone_number: "",
        password: "",
        repeat_password: ""
    }
};

When using import *, keep in mind that you are importing everything from that file, not just a specific constant. So:

User = myData;

doesn't quite achieve what you're aiming for. The correct syntax should be:

User = myData.information;

Additionally, it seems like your constant declaration may not be correct. Perhaps what you intended was:

export const information: Document = {   
        cpf: "",
        health_id: "",
        date_of_birth: "",
        email: "",
        repeat_email: "",
        phone_number: "",
        password: "",
        repeat_password: ""
};

import { information } from '../interface/patient.interface';

User = information;

In that case, you would use:

<ion-input type="number" [(ngModel)]="User.cpf"></ion-input>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the stored information from a variable

Can anyone help me with a coding issue I'm facing? I have a constant called data, which contains two values - prediction and probability. What is the best way to access and retrieve both values? type ML = { prediction: string; probability: num ...

Using the spread operator in the console.log function is successful, but encountering issues when attempting to assign or return it in a

Currently facing an issue with a spread operator that's really getting on my nerves. Despite searching extensively, I haven't found a solution yet. Whenever I utilize console.log(...val), it displays the data flawlessly without any errors. Howev ...

Specify the second parameter as a generic class that corresponds to the first parameter of the function

Given the example below, the second parameter of the fn function requires a class with a static attribute controle and an instance attribute controle, both of type number. interface Base { controle: number new(...args: any[]): { controle: n ...

Developing a customized code editor equipped with unique regulations in Angular 13 is an art I have mastered

Hello, I go by the name of Edu and I am currently developing a web IDE specifically for RISCV Assembly. As someone who has not previously worked with a code editor in angular, I find myself in need of creating some syntax rules. Are there any recommended ...

Guide to incorporating code coverage in React/NextJs using Typescript (create-next-app) and cypress

I initiated a fresh project using create-next-app with the default settings. npx <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365544535742531b58534e421b57464676070518021801">[email protected]</a> --- Would you l ...

Incorporate an Array of Objects into the UseState hook with an initial value

I have encountered an issue with the following error message: "Error: Objects are not valid as a React child (found: object with keys {fzfvhv76576, user }). If you meant to render a collection of children, use an array instead." I have been attem ...

Refreshing functional component upon change in property of different class [MVVM]

I've been tasked with incorporating MVVM into React for a class assignment. To achieve this, I've opted to use functional components for the view and TypeScript classes for the ViewModel. However, despite successfully updating properties in the V ...

One-liner in TypeScript for quickly generating an object that implements an interface

In Typescript, you can create an object that implements an interface using a single expression like this: => return {_ : IStudent = { Id: 1, name: 'Naveed' }}; Is it possible to achieve this in just one statement without the need for separate ...

Does manipulating the context before retrieving it within a custom ContextProvider adhere to best practices?

In my React application, I have a custom ContextProvider component called RepositoryContext. This component requires a specific ID to be set inside it in order to perform CRUD operations. Here is a snippet of the code: import React, { Dispatch, PropsWithCh ...

Firebase function unable to complete each task

I have been attempting to execute this function through every step of the process, but it appears that it only executes everything and returns a 200 response without running any of the set functions. The code is triggered by a Stripe Webhook (customer.sub ...

How to Add Multiple Components to app.module.ts in Angular-cli RC 5

I'm currently working on a project using Angular-cli RC5 and I'm facing some challenges creating charts. First, I created a new component called "chart" Then, I created a directive named "line-graph.directive.ts" This is how my folder structur ...

How to resolve the issue of a sticky header not functioning properly with a resizable column in Primeng

Currently, I am facing an issue while trying to incorporate both column resize functionality and sticky header in my table. Interestingly, the sticky header feature works perfectly fine when used alone without the column resize. However, when I attempt to ...

Can TypeScript Implement a Dictionary Feature Similar to C#?

Looking for guidance on how to use TypeScript interface to define these C# models: public class PageModel { public long Id { get; set; } public string Name { get; set; } public IDictionary<string, FieldModel> Fields { get; set; } } pu ...

Unable to access attributes of an undefined value (current state is undefined)

After completing a small project, I attempted to deploy it on Vercel. The project runs smoothly without any errors on my local machine. However, when I tried to run it on the server, I encountered the following error: "Cannot read properties of undefined ( ...

Navigating through async functions in an Express.js router

Encountered a lint error indicating that Promises cannot be returned in places where a void is expected. Both functions [validateJWT, getUser] are async functions. Any suggestions on how to resolve this issue without compromising the linter guidelines by u ...

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

About the application This application serves as a basic To Do List. It retrieves tasks from an API located at https://jsonplaceholder.typicode.com/todos?&_limit=5. Objective of the project The main goal is to test an API call that triggers ...

Customizing font color upon hover in Next.js and Tailwind.css

Recently, I developed a Navbar component that displays a purple link when navigating to pages like Home or Projects. The issue arises when the background color is light; in this case, the link turns green on hover instead of staying purple. How would I adj ...

How can we efficiently determine if a background image is broken in Angular 5 and substitute it with a default image?

When working with Angular 2+, we often use the <img> tag to display images using a syntax like <img [src]="myDp" (error)="myDp='assets/media/user/default_dp.jpg'">, where myDp contains the relative path to the image on the server. Is ...

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

It seems that there are plenty of guides available on converting a file from .js to .d.ts, but not the other way around. Specifically, I have some code in .d.ts format and I would like to convert it into JavaScript. Can anyone offer assistance with this t ...

The error message "Uncaught TypeError: emit is not a function in Vue 3" indicates

As I implemented the code in the Vue 3 setup block to retrieve the input value according to this answer, here is a snippet of the code: import { defineComponent } from "vue"; import { defineProps, defineEmits } from 'vue' export defaul ...