Angular (v4) form data object not matching json data

Question

I have the following form set up in Angular (v4)

I'm pulling the following json data

db.json file contents

{
  "customer": {
    "title": "",
    "firstName": "D",
    "lastName": "",
    "address": {
        "line1": "",
        "line2": "",
        "town": "",
        "postcode": ""
    },
    "acceptData": false
  }
}

But when I display the form outputs <pre>{{ form.value | json }}</pre> I get the following JSON data

FORM DATA

{
  "title": "",
  "firstName": "D",
  "lastName": "",
  "line1": "",
  "line2": "",
  "town": "",
  "postcode": "",
  "acceptData": false
}

You can see that the address object is missing, I'm sure I doing something wrong, quite simple but been staring at the code for hours and can't seam to fix it. I want the customer object to match that of the contents of db.json above.

FORM MARKUP

<form (ngSubmit)="handleSubmit(form.value, form.valid)" #form="ngForm" novalidate>

    <select
      id="title"
      name="title"
      [ngModel]="details?.title"
      (ngModelChange)="details.title=$event">
      <option value="" selected>Select</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
    </select>


    <label for="firstName">First name</label>
    <input
      type="text"
      name="firstName"
      id="firstName"
      maxlength="20"
      required
      #firstName="ngModel"
      [ngModel]="details?.firstName"
      (ngModelChange)="details.firstName=$event"
      [ngClass]="{ 'error': firstName.errors?.required && firstName.dirty }">
      <!--
        Display invalid error based on firstName.error value
        In case there is no inital value - hide it by checking .dirty value which would be false -->
    <div *ngIf="firstName.errors?.required && firstName.dirty" class="error">First name is required</div>

    <label for="lastName">Last name</label>
    <input
      type="text"
      name="lastName"
      id="lastName"
      maxlength="20"
      required
      #lastName="ngModel"
      [ngModel]="details?.lastName"
      (ngModelChange)="details.lastName=$event">
    <div *ngIf="lastName.errors?.required && lastName.dirty" class="error">Last name is required</div>

    <label for="address">Address
      <input
        type="text"
        name="line1"
        [ngModel]="details?.address.line1"
        (ngModelChange)="handleChange($event)"
        placeholder="Line1">
        <input
        type="text"
        name="line2"
        [ngModel]="details?.address.line2"
        (ngModelChange)="details.address.line2=$event"
        placeholder="Line2">
        <input
        type="text"
        name="town"
        [ngModel]="details?.address.town"
        (ngModelChange)="details.address.town=$event"
        placeholder="town">
        <input
        type="text"
        name="postcode"
        [ngModel]="details?.address.postcode"
        (ngModelChange)="details.address.postcode=$event"            
        placeholder="postcode">
    </label>

    <label>
      <input
        type="checkbox"
        name="acceptData"
        [ngModel]="details?.acceptData"
        (ngModelChange)="details.acceptData=$event">
    </label>

    <button
      type="submit"
      [disabled]="form.invalid">
      Submit
    </button>

    <div>
      <br />
      Form Data
      <pre>{{ form.value | json }}</pre>
    </div>

  </form>

Any help much appreciated

Answer 1

Just wrap the following form controls:

"line1": "",
"line2": "",
"town": "",
"postcode": ""

inside a div with ngModelGroup

<div ngModelGroup="address">
   <!-- input fields belonging to address here --> 
</div>

DEMO

Seems you maybe also want to wrap everything inside customer to match the JSON? Then do the same, wrap everything with ngModelGroup="customer"