Dynamically add a row to an Angular 5 Material Form - html

Question

I am using Angular Material to design a basic form, but I am stuck with trying to create the functionality to add a dynamic row to the form. I.e., when I click an "add" button next to a row, it should add a new empty row.
I have tried numerous ways to make use of this example, but my data either repeats, or my list bombs out:
The form code:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let field of fieldArray; let i = index">
<td>
<input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
</td>
<td>
<input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
</td>
<td>
<input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
</td>
<td>
<button mat-raised-button class="form-button-spacing" color="warn" type="button" (click)="deleteFieldValue(i)">
Delete</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
</td>
<td>
<input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
</td>
<td>
<input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice"
/>
</td>
<td>
<button mat-raised-button class="form-button-spacing" color="primary" type="button" (click)="addFieldValue()">
Add</button>
</td>
</tr>
</tbody>
</table>
The component code:
private fieldArray: Array<any> = [];
private newAttribute: any = {};
addFieldValue() {
this.fieldArray.push(this.newAttribute)
this.newAttribute = {};
}
deleteFieldValue(index) {
this.fieldArray.splice(index, 1);
}
How can I use my code below to create the same dynamically added rows:
<mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)" hideToggle="true">
<mat-expansion-panel-header>
<mat-panel-title>
<h4>Permits</h4>
</mat-panel-title>
<mat-panel-description>
<div></div>
<mat-icon>whatshot</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<div class="form">
<form class="permits-form" #permitsForm="ngForm" (ngSubmit)=onSubmit(permitsForm)>
<input type="hidden" name="AssetID" #AssetID="ngModel" [(ngModel)]="assetDataService.selectedAsset.AssetID">
<table class="full-width" cellspacing="0">
<tr>
<td>
<mat-form-field>
<mat-select placeholder="Permits" id="Permits" name="Permits" #Permits="ngModel" [(ngModel)]="assetDataService.selectedAsset.Permits"
required>
<mat-option *ngFor="let permit of permits" [value]="permit.name" required>
{{ permit.name }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
<td>
<mat-form-field class="full-width">
<input matInput placeholder="Title of Permit" id="PermitTitle" name="PermitTitle" #PermitTitle="ngModel" [(ngModel)]="assetDataService.selectedAsset.PermitTitle"
required>
</mat-form-field>
</td>
<td>
<mat-form-field class="full-width">
<input matInput [matDatepicker]="PermitIssueDate" placeholder="Issue Date" id="PermitIssueDate" name="PermitIssueDate" #PermitIssueDate="ngModel"
[(ngModel)]="assetDataService.selectedAsset.PermitIssueDate" required>
<mat-datepicker-toggle matSuffix [for]="PermitIssueDate"></mat-datepicker-toggle>
<mat-datepicker touchUi="true" #PermitIssueDate></mat-datepicker>
</mat-form-field>
</td>
<td>
<mat-form-field class="full-width">
<input matInput [matDatepicker]="PermitEndDate" placeholder="Expiry Date" id="PermitEndDate" name="PermitEndDate" #PermitEndDate="ngModel"
[(ngModel)]="assetDataService.selectedAsset.PermitEndDate">
<mat-datepicker-toggle matSuffix [for]="PermitEndDate"></mat-datepicker-toggle>
<mat-datepicker touchUi="true" #PermitEndDate></mat-datepicker>
</mat-form-field>
</td>
<td>
<mat-icon>add_circle_outline</mat-icon>
</td>
</tr>
</table>
</form>
</div>
</mat-expansion-panel>
Thank you in advance!

Answer 1

You should use reactive forms and you can add form controls dynamically.

Answer 2

I was able to resolve my need by implementing the following:
First, in my view I created another mat-table to hold and loop my added lines, as well as fetch the data source and assigning it to the table:
<mat-table #table [dataSource]="getPermitDataSource()">
<!-- Id Column -->
<ng-container matColumnDef="permit">
<mat-header-cell *matHeaderCellDef> Permit </mat-header-cell>
<mat-cell *matCellDef="let permit"> {{permit.Permits}} </mat-cell>
</ng-container>
<!-- Make Column -->
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> Permet Title </mat-header-cell>
<mat-cell *matCellDef="let permit"> {{permit.PermitTitle}} </mat-cell>
</ng-container>
<!-- Model Column -->
<ng-container matColumnDef="issue">
<mat-header-cell *matHeaderCellDef> Issue Date </mat-header-cell>
<mat-cell *matCellDef="let permit"> {{permit.PermitIssueDate | date}} </mat-cell>
</ng-container>
<!-- Regitration Column -->
<ng-container matColumnDef="expiry">
<mat-header-cell *matHeaderCellDef> Expiry Date </mat-header-cell>
<mat-cell *matCellDef="let permit"> {{permit.PermitEndDate | date}} </mat-cell>
</ng-container>
<!-- actions -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Edit | Delete</mat-header-cell>
<mat-action-row>
<mat-cell *matCellDef="let permit; let i=index;">
<button mat-icon-button class="form-button-spacing float-right" color="primary" (click)="onPermitDelete(permitsForm)">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</mat-cell>
</mat-action-row>
</ng-container>
<!-- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> -->
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Secondly, I implemented the functionality in my component:
addNewPermitToArray(form: NgForm) {
this.permitArray.push(form.value);
this.getPermitDataSource();
form.reset();
}
getPermitDataSource() {
this.displayedColumns = this.displayedColumns = ['permit', 'title', 'issue', 'expiry', 'actions'];
return this.permitDataSource = new MatTableDataSource(this.permitArray);
}
I hope this will help someone else out there!