How do I pass entire object from a NgFor to my component controller

0
votes

I have a form where I use select options. This component is to add Jobs and you can select a Client which contains a Client Name, Address, Telephone and Fax (you add those from the Client page) OR you can manually add it on the specific job.

When there are Clients in the list you can select the client and it will automaticly fill the client phone, fax and address but I don't know how to pass my entire client from the NgFor back to the controller. What I tried so far is to put the option in an NgModel and on the select Change find the correct client in the array that is equal to that ngModel value but Im sure there is a better way to do that ?

<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues()" id="clientNameSelect" formControlName="clientName" class="form-control">
    <option *ngFor="let client of allClients" [(ngModel)]="selectedClient" value="{{client.name}}">{{client.name}}</option>
</select>

If I could pass the client from ngFor it would be much easier.

1
javascriptangularangular6
What is selectedClient? Should not the ngModel be bound to client like [(ngModel)]="client" - dileepkumar jami

1 Answers

0
votes

You have two options:

1.

<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues();onClick($event)" id="clientNameSelect" formControlName="clientName" class="form-control">
    <option *ngFor="let client of allClients; let i = index;" value="i">{{client.name}}</option>
</select>

2.

<select *ngIf="!manualClient" name="clientName" (change)="fillClientValues($event)" id="clientNameSelect" formControlName="clientName" class="form-control">
    <option *ngFor="let client of allClients; let i = index;" value="i">{{client.name}}</option>
</select>

From the event object you can extract the index. I would suggest the second option is the better one. In my experience calling functions from templates are expensive.

cheers