I am sill a bit new to Angular, I am trying to use p-autoComplete inside a table, once a row is selected my auto complete should preselect the current value..I tried using [(ngModel)]="row.bsaName" but it is not working. Since [suggestion] is an Array of object it is not binding. I need to change row.bsaName or bsaName property on my data to an Object with {id, name} to match the data model of [suggestions], how o I do that?
HTML
<p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
[rows]="10">
<ng-template pTemplate="header">
<tr>
<th width="5%">eRSA ID</th>
<th width="15%">Access For</th>
<th width="17%">Followup DT</th>
<th width="33%">Comment</th>
<th width="20%">BSA Name</th>
<th width="10%">Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.ersaID}}</td>
<td>{{row.accessFor}}</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
<div *ngIf="row.isBSAEditable">
<!--<textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5"></textarea>-->
<p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
<!--<span *ngIf="isEmpty(row.followupDate)" style="color:crimson; font-size:8pt">Required</span>-->
</div>
</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
<div *ngIf="row.isBSAEditable">
<textarea name="Text1" [(ngModel)]="row.comment" cols="40" rows="5" ></textarea>
<!--<input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">-->
<span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
<div *ngIf="row.isBSAEditable" >
<p-autoComplete name="bsaNameList" [(ngModel)]="bsaListVal" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id"[dropdown]="true"></p-autoComplete>
<span *ngIf="isEmpty(row.bsaName)" style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div>
<modal [row]="row" [disableEditSaveButton]='isEmpty(row.comment)' (deleteRow)="onDeleteFollowup(row)" [showModal]="!row.isBSAEditable" (selectedRow)="onSelectedFollowupdRow(row)" (cancelEdit)="onCancelFollowupEdit(row)" (save)="onFollowupSave(row)"></modal>
</div>
<!--<button (click)="editRow(row)">Edit</button>-->
</td>
</tr>
</ng-template>
</p-table>
Component
bsaListVal: IBsaList;
iBsaList: IBsaList[];
originalBsaList: IBsaList[];
ngOnInit(): void {
this.getBSAFollowup();
this.GetBsaList();
}
searchBsaList(event) {
this.iBsaList = this.originalBsaList;
this.iBsaList = this.iBsaList
.filter(data => data.name.toString()
.toLowerCase()
.indexOf(event.query.toString().toLowerCase()) !== -1);
}
GetBsaList() {
this._dashboardService.getBSAList()
.subscribe(
data => {
this.iBsaList = data.result;
this.originalBsaList = data.result;
},
error => console.log('xx Method: ' + 'alert alert-danger'));
}
getBSAFollowup() {
this._dashboardService.getBSAFollowup()
.subscribe(
data => {
this.iBsaFollowup = data.result;
this.iBsaFollowup.map(row => {
row.isBSAEditable = false;
});
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
}
interface
export interface IBsaList {
id: string,
name: string
}
data result
All{"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]}
*********************************************************update******************************************** For simplicity, I removed (*ngIf="row.isBSAEditable") so it will be automatically editable . Also took out the modaland added Edit button
HTML
<p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">
<ng-template pTemplate="header">
<tr>
<th width="5%">eRSA ID</th>
<th width="15%">Access For</th>
<th width="17%">Followup DT</th>
<th width="33%">Comment</th>
<th width="20%">BSA Name</th>
<th width="10%">Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.ersaID}}</td>
<td>{{row.accessFor}}</td>
<td>
<div>
<p-calendar name="followupDate" [(ngModel)]="row.followupDate" [dataType]="date" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
</div>
</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
</td>
<td>
<p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)"
[style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</td>
<td>
<button (click)="editRow(row)">Edit</button>
</tr>
</ng-template>
</p-table>
Result for the auto complete dropdown
All{"result":[{"id":"1","name":"Mike S"},{"id":"2","name":"John B"},{"id":"3","name":"Adam P"},{"id":"4","name":"Sam J"},{"id":"5","name":"Carolyn G"},{"id":"6","name":"Steve C"}]}
iBsaFollowUp JSON
All{"result":[{"id":x,"ersaID":XXX,"bsaID":"5","followupDate":"10/27/2017","active":true,"comment":"test this rsss 2","accessFor":"XXXX","bsaName":"Carolyn G"},{"id":X,"ersaID":XXXX,"bsaID":"1","followupDate":"10/27/2017","active":true,"comment":"test this rsss 4","accessFor":"XXXXX","bsaName":"Mike S"}}}
p-dataTable? – Antikhippep-tablewhich is different fromp-dataTable. How do you filliBsaFollowuparray ? – Antikhippe_dashboardService.getBSAFollowup()returns ? – Antikhippe