1

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.

variable
  • 8,262
  • 9
  • 95
  • 215

2 Answers2

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 = {};
M4R1KU
  • 710
  • 7
  • 22
  • would using class instead of interface make any difference? – variable Dec 12 '18 at 12:28
  • I already answered a similar question [here](https://stackoverflow.com/questions/40967599/angular2-mapping-nested-json-array-to-model/40974173#40974173) – M4R1KU Dec 12 '18 at 12:31
  • 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? – variable Dec 12 '18 at 12:34
  • 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()` – M4R1KU Dec 12 '18 at 12:43
  • 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. – variable Dec 12 '18 at 12:46
  • I am not really sure I understand your actual problem, but it seems like you should just make sure that there is no null value when using a checkbox. With a bit more code it would be easier to understand. You could create a stackblitz for example. – M4R1KU Dec 12 '18 at 12:59
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;
}
SeleM
  • 9,310
  • 5
  • 32
  • 51