При добавлении элемента в ng-шаблон в массиве формы данные отображаются неправильно

Question

У меня есть форма с inputs для отца, матери и детей. Вы также можете добавить больше детей в список.

Когда я нажимаю Add child, создается новая строка для ввода данных для дополнительного дочернего элемента, но данные первого дочернего элемента исчезают. Также исчезает день рождения матери. Интересно отметить, что данные не теряются в this.family

Вы можете видеть, что проблема происходит на Stackblitz .

app.component .ts

public family: IFamily = {
  father: {
    name: 'William Arthur Philip Louis',
    birthday: '1982-06-21'
  },
  mother: {
    name: 'Kate Middleton',
    birthday: '1982-01-09'
  },
  children: [
    {
      name: 'George Alexander Louis',
      birthday: '2013-07-22'
    }
  ]
};

addChild() {
  this.family.children.push({name: null, birthday: null})
}

interface IPerson {
  name?: string;
  birthday?: string
}

interface IFamily {
  father?: IPerson,
  mother?: IPerson,
  children?: IPerson[]
}

app.component. html

<form #formFamily="ngForm">
  <div class="form-control">
    <input id="fatherName" name="fatherName" [(ngModel)]="this.family.father.name" placeholder="Name of father" type="text">
    <input id="fatherBirthday" name="fatherBirthday" [(ngModel)]="this.family.father.birthday" placeholder="Birthday of father" type="text">
  </div>
  <div class="form-control">
    <input id="motherName" name="motherName" [(ngModel)]="this.family.mother.name" placeholder="Name of mother" type="text">
    <input id="motherBirthday" name="motherBirthday" [(ngModel)]="this.family.mother.birthday" placeholder="Birthday of mother" type="text">
  </div>

  <h4>Children</h4>
  <button type="button" (click)="addChild()">Add child</button>
  <br><br>
  <ng-template ngFor let-child [ngForOf]="this.family.children" let-i="index">
    <div class="form-control">
      <input id="childName" name="childName" [(ngModel)]="child.name" placeholder="Name of child" type="text">
      <input id="motherBirthday" name="motherBirthday" [(ngModel)]="child.birthday" placeholder="Birthday of child" type="text">
    </div>
  </ng-template>
</form>