Add HTML form input fields dynamically - Angular 2

Question

I'm trying to add dynamic rows in my ng2 app. Bellow sample working fine. But if I move this HTML template table inside a HTML form tag, it will not display textbox values. but textboxes values hold in ngmodel. How does display the textbox values?

HTML Template:

             <table>
                <tr>
                    <td>Item</td>
                    <td>Qty</td>
                    <td>UP</td>
                    <td>Total</td>
                </tr>
                <tr *ngFor="let row of invoiceItemsData; let i = index">
                    <td><input type="text" class="form-control" required [(ngModel)]="row.item_id" value="{{row.item_id}}" name="item_id"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.qty" value="{{row.qty}}" name="qty"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.unit_price" value="{{row.unit_price}}" name="unit_price"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.total" value="{{row.total}}" name="total"></td>
                    <a class="btn btn-primary" (click)="addNewRow()">New</a>
                </tr>
                {{invoiceItemsData|json}}
            </table>

NG2 Code sample:

export class InvoiceFormComponent implements OnInit {

       public myForm: FormGroup;
       public invoiceItemsData = [{'item_id':'','qty':'','unit_price':'','total':''}] ;

       constructor(private formBuilder: FormBuilder) {}

       ngOnInit() {}

        addNewRow(){
          this.invoiceItemsData.push({'item_id':'','qty':'','unit_price':'','total':''})
        }
}

Output:

Added HTML Table inside to HTML from

<form  name="inv" novalidate (ngSubmit)="save(myForm)">
            <table class="table">
                <tr>
                    <td>Item</td>
                    <td>Qty</td>
                    <td>UP</td>
                    <td>Total</td>
                </tr>
                <tr *ngFor="let row of invoiceItemsData; let i = index">
                    <td><input type="text" class="form-control" required [(ngModel)]="row.item_id" value="{{row.item_id}}" name="item_id"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.qty" value="{{row.qty}}" name="qty"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.unit_price" value="{{row.unit_price}}" name="unit_price"></td>
                    <td><input type="text" class="form-control" required [(ngModel)]="row.total" value="{{row.total}}" name="total"></td>

                    <a class="btn btn-primary" (click)="addNewRow()">New</a>
                </tr>
                {{invoiceItemsData|json}}
            </table>
</form>

Output when HTML table move inside to a HTML form: