Getting undefined error during two-way form binding when using object that implements an interface

Question

I have an interface User:

export interface User{
name:string;
email:string:
address:string;
}

I imported this on my ionic page and in the class, before the constructor code I have the code:

user:User;

Then, in the ngOnInit method I have the code that sets the value of this user variable.

This works OK.

Now I am trying to implement two-way binding of the user object and the form input fields. On the form input fields I use the model like this: [(ngModel)]="user.name"

Now I get an error that the user.name field is undefined. So I go to my page code and try to set user:User={};

This gives error because interface is expecting name, email and address - so cant be declared as empty. If I remove the interface and declare the code as: user:any={} then it works OK.

I think that the undefined error is because the user object doesn't have value (set in the ngOnInit method) when the UI is being loaded? How do I go about such a situation where in I want to implement the concept of interface? Or is it good to implement nullable fields? Or is the best practice to use a class? Please I need some clarity on this.

M4R1KU · Accepted Answer · 2018-12-10 10:14:34Z

2

You can make properties in interfaces optional by using the ? after the name.

export interface User {
    name?: string;
    email?: string;
    address?: string;
}

With this code you don't have to explicitly define all properties when creating the user object with:

user: User = {};

answered Dec 10, 2018 at 10:14

M4R1KU

7189 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

variable Over a year ago

would using class instead of interface make any difference?

M4R1KU Over a year ago

I already answered a similar question here

variable Over a year ago

I understand the use of 'as' but my concern is that if the return value is null, then irrespective of interface or class, the variable will be set to null. How to counter that please?

M4R1KU Over a year ago

The return value of what? The ngModel? If the underlying element of the ngModel sets your user.name to null, you cannot counter that. Or do you mean initialization of the user variable itself. You could use a class there instead of an interface but the only thing that would change is the initalization of the user object. user: User = {} => user = new User()

variable Over a year ago

I mean let's say a provider (service) returns an object. The page invokes this service and assigns a variable the object returned by the provider. Assuming the variable is an instance of class or of type interface, if the provider returns a valid object then all good. But if the provider returns a null, then the variable will get set to null also. This is not a problem if using ngModel the variable is bound to input textbox (using variable.field). However, if instead of textbox, it is a checkbox, then there is null error thrown.

|

SeleM · Accepted Answer · 2018-12-10 10:15:40Z

1

Use safe opertaor ? (That answers your question Or is it good to implement nullable fields?):

export interface User {
    name?: string;
    email?: string;
    address?: string;
}

answered Dec 10, 2018 at 10:15

SeleM

9,6885 gold badges36 silver badges55 bronze badges

2 Comments

variable Over a year ago

Or is it more better to use a class instead of iterface?

SeleM Over a year ago

@variable If u do noy have methods (means just properties) , u do not have to do so, leave it an interface is better.

Collectives™ on Stack Overflow

Getting undefined error during two-way form binding when using object that implements an interface

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related