How to assign [(ngModel)] with an empty/null/undefined object? Angular 4

Question

I want to assign [(ngModel)] inside my .html code to an object which is empty (null or undefined), but it gives error of _co.object is null. There are 2 cases, 1st when my object has value, 2nd when it does not. First case ngModel works fine, but when it comes to second, it gives error of being null. With elvis(?) operator i tried, it does not help.

Problem was solved !! THank you all

My .ts page

profile: Profile = {

          fullName: '',
          email: '',
          address: '', 
      };

My .html page

<ion-item>
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile.fullName"></ion-input>
</ion-item>

ERROR TypeError: "_co.profile is null"

Answer 1

You always need to secure getting properties of an object. Or in the future you can face unexpected problems.

Either use ngIf

<ion-item *ngIf="profile">
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile.fullName"></ion-input>
</ion-item>

or make it optional

<ion-item>
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile?.fullName"></ion-input>
</ion-item>

if you have compilation error, when using optional chaining, you need to separate property and event bidding

<ion-item>
  <ion-label>Full Name:</ion-label>
  <ion-input [ngModel]="profile.fullName" (ngModelChange)="profile?.fullName = $event"></ion-input>
</ion-item>

Answer 2

Thank you guys. I found my mistake to be in another place. I somehow was re-asigning the 'profile' object in ngOnInit from empty to undefined. Like so:

ngOnInit(){  
//code...
 if(!this.profile){
      this.profile = {} as Profile; //here was the mistake which I accidentally made.
      //and it was assigning my object to null
   }
}

Answer 3

When you declare profile you should add all the children this will stop it being undefined.

export class Foo {

public profile:any = { 
        fullName='',
        foo = '',
        bar = ''
      }

Answer 4

When your binding is to a property of a nullable object you can protect against errors when the object is null by creating a setter and getter and binding to that property alias.

For example, instead of

[(ngModel)]="model[`${this.field.key}_selectedObject`]"

change to

[(ngModel)]="fieldModel"

Then in your ts code add

public get fieldModel(): any  {
   if (!this.model) return null;
   return this.model[`${this.field.key}_selectedObject`];
}
public set fieldModel(value: any) {
   if (!this.model) return;
   this.model[`${this.field.key}_selectedObject`] = value;
}

Answer 5

For anyone having this error on angular 10+. Do this in your tsconfig file

  "strict": true,
  "strictNullChecks": false

and then here is an example of how you could use it in your property binding

<div>
  <label>Street Address</label>
    <input type="text" class="form-control" name="street"
   [(ngModel)]="user.address.street">
</div>

assuming your model looks like this

User {
 address?: {
    street?: string,
    city?: string,
    province?: string
  }
}