Having trouble associating an object with a template using ngModel?

Question

Having trouble associating an object with a template using ngModel?

It seems like such a simple thing to do, but for some reason I can't seem to get it right.

Here is what I have in my class:

interface Message {
  type:  string;
  email: string;
}

export class MyClass {
  public message: Message;
  public email: string;

  constructor() { }

  // ...
}

When I bind the email variable using [(ngModel)]='email', everything works fine. But when I try to bind the message with [(ngModel)]='message.email', I encounter this error:

Cannot read property 'email' of undefined.

Why does Angular fail to access my object variable?

typescript angular angular2-template

Answer 1

Answer №1

To enable binding an input on one of the properties of your message property, you must first initialize it:

export class MyClass {
  public message: Message = { type: '...', email: '...'};
  public email: string;

  constructor() { }

  // ...
}

Update:

In this scenario, since Message is an interface, you cannot directly instantiate an object of this type. Instead, use a literal object expression to create an instance of type Message. TypeScript will validate that all necessary elements are included.

If you wish to create an instance of the type, define a class. Classes have representation in compiled code unlike interfaces.

Below is an example:

export class Message {
  constructor(public type: string, public email: string) {
  }
}

export class MyClass {
  public message: Message = new Message('type', 'email');
  public email: string;

  constructor() { }

  // ...
}

Answer 2

To enable binding an input on one of the properties of your message property, you must first initialize it:

export class MyClass {
  public message: Message = { type: '...', email: '...'};
  public email: string;

  constructor() { }

  // ...
}

Update:

In this scenario, since Message is an interface, you cannot directly instantiate an object of this type. Instead, use a literal object expression to create an instance of type Message. TypeScript will validate that all necessary elements are included.

If you wish to create an instance of the type, define a class. Classes have representation in compiled code unlike interfaces.

Below is an example:

export class Message {
  constructor(public type: string, public email: string) {
  }
}

export class MyClass {
  public message: Message = new Message('type', 'email');
  public email: string;

  constructor() { }

  // ...
}

Having trouble associating an object with a template using ngModel?

Answer №1

Similar questions

Perform TypeScript type checks exclusively on a Next.js project

Utilizing Nativescript alongside Angular 2 and Firebase: A Comprehensive Guide

Ensuring Type Safety for Collections in TypeScript

Typescript signals that the symbol being exported is not recognized as an exported symbol

Displaying a specific item with an icon in a list for user interaction in Ionic 3

Validating dynamic textboxes in Angular with custom rules

When ng-test is executed in an Angular service, the function array.some is not found

Error TS2307 - Module 'lodash' not found during build process

Is it possible to access ng-content components using @ViewChild?

Strategies for passing multiple props to a function in React using TypeScript, such as useState([]) and useState(boolean)

Angular's ng-select fails to select the value when generating the dynamic control

Angular scroll directive fails to trigger

Error: Syntax error - there was an unexpected token '.'

Error encountered: Angular2 is unable to locate the traceur module after integrating the hltv-api npm

Invoke a shared function within multiple component HTML files when an onchange event is triggered by a universal service

Difficulty in toggling the visibility of the react-date-range picker package when selecting a date

Debugging is not possible for applications running on an Android device with Ionic 2

Angular elements nested within each other are causing the ExpressionChangedAfterItHasBeenCheckedError

A guide on setting a default constructor as a parameter in TypeScript

Angular/NX - Element 'Component' is unrecognized, despite being imported within the module