Create a new TypeScript object without any initial properties, then proceed to define its attributes

Working on honing my skills with Angular Forms utilizing the template-driven approach. My goal is to construct a user interface to display the output of my data in this structure: 

            <hr>
            <div class="well well-lg">
              <p>Email Address: <span class="bg-info">{{data.email}}</span></p>
              <p>Subscription Type: <span class="bg-info">{{data.sub}}</span></p>
              <p>Password: <span class="bg-info">{{data.pass}}</span></p>
            </div>

In my typescript file, I have defined my data object with three properties initialized as strings: 

data: {email: string, sub: string, pass: string};

Within the constructor, I have set the initial values of these properties to empty strings: 

this.data.email = '';
this.data.sub = '';
this.data.pass = '';

Upon form submission, I have implemented the following logic: 

if(this.myForm.valid){
      this.data.email = this.myForm.value.email;
      this.data.sub = this.myForm.value.subscription;
      this.data.pass = this.myForm.value.password;
      this.myForm.reset();
    }

However, upon reloading the page, I am encountering this error: 

ERROR TypeError: Cannot set property 'email' of undefined

I believe this issue is stemming from the way I am declaring the object. I have specified the types of its properties and provided default values in the constructor. Nonetheless, this.data appears to be undefined within the constructor.

What is the proper way to handle this in TypeScript?

typescript

Answer №1

The undefined object does not have defined data properties, so attempting to append properties to it will result in an error. To avoid this issue, set up the data properties in your constructor like this:

this.data = {
    email: '',
    sub: '',
    pass: '',
};

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

Sharing API data between components in Angular 5

Summary: I'm trying to retrieve data from an input field in a component form, then compare it using API services. After that, I want to take the value from the "correo" field in the form and pass it to another component. In this other component, I aim ...

phpangulartypescript

Tips for adjusting the width of columns automatically in exceljs

One of my challenges is to automatically adjust column width using exceljs. I want the Excel sheet to be dynamic, saving only the columns specified by the user in the request. Here is the code snippet that accomplishes this: workSheet.getRow(1).values = dt ...

javascriptexceltypescriptexceljs

How to Resolve a Typescript Promise Syntax Error?

I have been working on creating a login authorization system to secure certain routes in an angular application, but I keep encountering a TypeScript error in the auth-guard.service during compilation. Despite my efforts, I am unable to pinpoint the issue. ...

angulartypescript

React-admin: Reference Input is only showing IDs instead of displaying my fields

I am currently working with a Reference input in react admin, but I am facing an issue where it displays the ids of the resource instead of the field I specified (status) and I am unsure why this is happening. Here is a snippet of my code: const Candidatur ...

typescriptreferencereact-admin

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

javascripthtmlangulartypescriptfullcalendar

Can we limit the return type of arrow function parameters in TypeScript?

Within my typescript code, there is a function that takes in two parameters: a configuration object and a function: function executeMaybe<Input, Output> ( config: { percent: number }, fn: (i: Input) => Output ): (i: Input) => Output | &apos ...

typescript

Typedoc: only export contents from a particular file are documented

Currently, I am working on developing two npm packages: https://github.com/euberdeveloper/mongo-scanner https://github.com/euberdeveloper/mongo-cleaner My goal is to create documentation for these packages using Typedoc. The main file is index.js p ...

node.jstypescriptnpmtypedoc

Finding Nested Key Paths in TypeScript for Objects and Arrays

I am in search of a unique method to create a TypeScript type that can take an object type and retrieve all the nested key paths, including properties within arrays as well. I want to exclude any default array properties such as "push" or "pop." While I ha ...

typescriptkey

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

htmlangulartypescriptfilterangular-material

The call to Contentful's getAsset function resulted in an undefined value being

I am facing a challenge while trying to fetch an asset, specifically an image, from Contentful and display it in my Angular application. Despite seeing the images in the Network log, I keep encountering an issue where the console.log outputs undefined. Any ...

javascriptangulartypescriptcontentful

typeorm migration:generate - Oops! Could not access the file

When attempting to create a Type ORM migration file using the typeorm migration:generate InitialSetup -d ormconfig.ts command, I encountered an error: Error: Unable to open file: "C:\_work\template-db\ormconfig.ts". Cannot use impo ...

typescripttypeorm

Tips for showcasing images stored in Azure Blob storage

Currently, I am developing an application that requires loading images from a web novel stored in Azure Storage Accounts as blobs. While I have enabled anonymous reads to show the image upon request successfully via a web browser or Postman, I am facing an ...

typescriptazure

In TypeScript, at what level should the timeout be specified?

I'm currently working on writing a debounce function in TypeScript, but I'm feeling uncertain about the type that should be assigned to a variable used with setTimeout. This is the snippet of my code: function debounced(func: () => void, wait ...

javascripttypescriptecmascript-6

How to Send TypeScript Object Excluding the '_id' Field?

I am currently developing a web app using Express, Mongoose, and Angular 2 (TypeScript). I want to post an instance of MyClass without including the _id field. In mongoose, the _id field is used for various operations in MongoDB. Here is how I have implem ...

mongodbexpressangulartypescriptmongoose

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

For instance, assume I have 2 API services that return data in the form of Observables. function add(row) { let r = Math.ceil(Math.random() * 2000); let k = row + 1; return timer(r).pipe(mapTo(k)); } function multiple(row) { let r = Math.c ...

javascripttypescriptrxjs6

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Can the "Another app is displaying over chrome error" be bypassed using JavaScript or TypeScript? Error Message: https://i.stack.imgur.com/iSEuk.png ...

javascriptandroidtypescriptgoogle-chrome

Trigger change event on model update in Angular 4 checkboxes

CSS <div class="checkbox-item"> <input type="checkbox" id="1" [(ngModel)]="filter" (change)="onFilterChange($event)"> CheckBox </div> <button (click)="filter = !filter">Change Status</button> JavaScript export class Filt ...

angulartypescriptcheckboxangular-ngmodel

Entering key-value pairs into a dictionary to show correlation

I've been struggling to find a solution for what seems like a simple issue. The problem lies in typing a dictionary with values of different types so that TypeScript can infer the type based on the key. Here is the scenario: type Id = string; inter ...

typescripttypescript-generics

Observable dataset

I'm curious about the correct type of Observables array. Can you advise? So far, I've attempted the following: let myObservables: Observable[] = new Array(); let myObservables: Observable<Array<any>> = new Array(); let myObservables ...

angulartypescript

Angular correctly displaying specific array items within button elements

I am facing an issue with my dashboard where I have 4 items in an array and 4 buttons on display. My goal is to assign each item with a specific button, but currently, it shows 4 buttons for each "hero" resulting in a total of 16 buttons. I have tried usin ...

arraysangulartypescript