Angular [(ngModel)] does not show values after new item added to Array

After I add an Object to the array, the values don't appear in the tableInputRow.name but the values from tableInputRow.priority work. This is the object pushed to the Array

export class NewTableInputRow{

  constructor
  /* paramenters
  */
  (
    public name=undefined,
    public priority=5,
    public lastEdit = undefined,
    public expanded = false,
  )

    /* code block
    */
    {
    }


}

This is the template

{{tableInputRows | json}}
<section>
  <div class="row form-group">
      <div class="col-md-10 col-9">
        <span>Task name</span>
      </div>
      <div class="col-md-2 col-3 priority-text-new-table">
        <span>Priority(0-5)</span>
      </div>
  </div>
  <div  *ngFor="let tableInputRow of tableInputRows; index as index"
        class="row form-group">
      <div class="col-md-10 col-9 contains-expand-arrow" [attr.data-index]="index">
        <div class="regular-row" *ngIf="!tableInputRow.expanded">
          <input
            [required]="!index"
            [(ngModel)]="tableInputRow.name"
            name="row-name"
            class="form-control"
            type="text"
            placeholder="Task Name">
            <i class="fa fa-expand" (click)="onRowExpandColToggle(index)" aria-hidden="true"  title="Expand input height"></i>
        </div>
        <div class="expand-row" *ngIf="tableInputRow.expanded">
          <textarea
            [required]="!index"
            [(ngModel)]="tableInputRow.name"
            name="row-name-expanded"
            class="form-control"
            placeholder="Expanded Task Name">
          </textarea>
          <i class="fa fa-compress" (click)="onRowExpandColToggle(index)" title="Collapse input height" aria-hidden="true"></i>
        </div>
      </div>
      <div class="col-md-2 col-3 priority-nr-new-table">
        <input [required]="!index"
              [(ngModel)]="tableInputRow.priority"
              type="number"
              name="priority-{{index}}"
              min="0"
              max="5"
              class="form-control">
      </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button (click)="oneNewFieldBtnClick($event)" class="btn">New field <i class="fa fa-plus"></i></button>
      <button (click)="onRemoveLastInputRow($event)" class="btn">Reduce <i class="fa fa-minus"></i></button>
    </div>
  </div>
</section>

This is how the object is added

oneNewFieldBtnClick($event) {
  $event.preventDefault();
  this.appendNewTableInputRow($event)
}

appendNewTableInputRow($event) {
  this.tableInputRows.push(new NewTableInputRow());
}

Fixed after I changed the input and textarea name to name="row-name-{{index}}"

<div class="col-md-10 col-9 contains-expand-arrow" [attr.data-index]="index">
  <div class="regular-row" *ngIf="!tableInputRow.expanded">
    <input
      [required]="!index"
      [(ngModel)]="tableInputRow.name"
      name="row-name-{{index}}"
      class="form-control"
      type="text"
      placeholder="Task Name">
      <i class="fa fa-expand" (click)="onRowExpandColToggle(index)" aria-hidden="true"  title="Expand input height"></i>
  </div>
  <div class="expand-row" *ngIf="tableInputRow.expanded">
    <textarea
      [required]="!index"
      [(ngModel)]="tableInputRow.name"
      name="row-name-{{index}}"
      class="form-control"
      placeholder="Expanded Task Name">
    </textarea>
    <i class="fa fa-compress" (click)="onRowExpandColToggle(index)" title="Collapse input height" aria-hidden="true"></i>
  </div>
</div>