Juicy Juicy - 2 months ago 9
TypeScript Question

Getting an `undefined` error when trying to assign values to attributes

I'm getting an

undefined
error when trying to assign values to the properties of a custom class.

I defined a
FileArgument
class as such:

export class FileArgument {
name: string;
path: string;
file: File;
}


I want to use it in my component to store information about a
file
type input field. My component looks like this:

export class InputModuleComponent {
private fileArgument: FileArgument;

onChange(event): void {
console.log('input-module.component - onChange()');

this.fileArgument.file = event.originalTarget.files[0];
this.fileArgument.name = event.originalTarget.id;
console.log(this.fileArgument);
}
}


And my simplified
html
looks like:

<input
name="{{arg.name}}"
id="{{ arg.name }}"
type="file"

[(ngModel)]="moduleArguments[arg.name]"
(change)="onChange($event)"
>


When the
onChange
method is triggered, I get the following error:

Error: Error in http://localhost:3000/app/input/input-module/input-module.component.js class InputModuleComponent - inline template:16:9 caused by: this.fileArgument is undefined


If I comment out the lines where I try to assign values to
this.fileArgument.file
and
.name
my app works without errors.

EDIT: Please note the error definitely comes from assigning values to
fileArgument.file/name
. The
event.originalTarget.files/id
return values without error.

Answer

You're only assigning a type. You also need to assign an instance of the object:

private fileArgument: FileArgument = new FileArgument();