Angular 8- two way data binding, null values

I am having an issue with two way data binding and Angular 8

In the following example, my model (service.formData) is populated, but one of the variables (which is really a child table) is null(service.formData.ProjectSshaspModel) If I populate data in the database, the two way binding seems to work ok and retrieves and passes data back. But when the variable is null when the page loads, and I populate the model (HTML page), the object does not seem to get populated

I have placed both the HMTL, Angular Two Way data binding and JSON values below. Please help if possible. Thank you

 <form #form="ngForm" autocomplete="off" (submit)="OnSubmit(form)" *ngIf="service.formData">
  <div class="row" id="section1">
    <div class="col-md-10">

      <input type="hidden" name="ProjectID" #ProjectID="ngModel" [(ngModel)]="service.formData.ProjectID" />
      <input type="hidden" name="ProjectSshaspModel.ProjectSshaspID" #ProjectSshaspModel.ProjectSshaspID="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel.ProjectSshaspID" />
        <input type="radio" id="not-required"
               name="CompanyLogoRequired" #ProjectSshaspModel.CompanyLogoRequired="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired" ng-checked="(CompanyLogoRequired==0)" [value]="0" />
        Not Required
        &nbsp;
        <input type="radio" id="incorporate"
               name="CompanyLogoRequired" #ProjectSshaspModel.CompanyLogoRequired="ngModel" [(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired" ng-checked="(CompanyLogoRequired==1)" [value]="1" />
        Incorporate


{
"projectModel": {
    "ProjectSshaspModel": null,
    "ProjectID": "a9400d92-de37-4c00-957e-08d7bbd4b4c5",
    "ProjectNumber": "2020-1233",
    "Consultant": "Joe Test",
    "AssignedDate": "2020-02-28T00:00:00",
    "ClientDueDate": "2020-02-29T00:00:00",
    "ProjectCreationDate": "2020-02-28T00:00:00",
    "ScopeOfWork": "Scope of work",
    "Service": 0,
    "ClientName": "Ebay",
    "CompanyContact": "John Smith",
    "CompanyContactPhone": "555-555-5555",
    "CompanyContactEmail": "jsmith@comcast.net",
    "CompanyAddress": "123 Sesame Place Test, JN 01111",
    "CompanyType": 2
}

}

Solution

Suppose your ngModel is defined with the variable service.formData.ProjectSshaspModel.ProjectSshaspID then its required that only the final variable is null, previous properties cannot be null ( in this case ProjectSshaspID can only be null. So I would suggested to initialize the variable during component initialization as shown below.

service.ts

this.formData.ProjectSshaspModel = {};

Also why is your ngModel incorrectly defined with two variables.

[(ngModel)]="service.formData.ProjectSshaspModel && service.formData.ProjectSshaspModel.CompanyLogoRequired"

ngModel requires only one variable to update, so change it to one variable

[(ngModel)]="service.formData.ProjectSshaspModel.CompanyLogoRequired"