Angular 8 set selected value in dropdown based on string

0
votes

I have this code: 

  <ng-container matColumnDef="pricingTemplateId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Margin</th>
            <td mat-cell *matCellDef="let customer">
                {{customer.pricingTemplateName}}
            </td>
        </ng-container>

        <ng-container matColumnDef="PricingTemplatesList">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Margin Template</th>
            <td mat-cell *matCellDef="let customer">
                <select id="pricingtemplates" name="ddlPricingTemplate">
                    <option *ngFor="let pricingTemplate of customer.pricingTemplatesList" [(ngModel)]="customer.pricingTemplateName">{{pricingTemplate.name}}</option>
                </select>
            </td>
        </ng-container>

For the select control I'm attaching array of objects like in the screenshot below:

enter image description here

Now, I also have another string value in the model on which I want to base the selected value in the dropdown.

When I do [(ngModel)]="customer.pricingTemplateName" which is basically a string I'm getting this message "No value accessor for form control with unspecified name attribute"

Without the ngModel property I'm able to list all the template names in the dropdown but do I need to do some change in order to set the selected value based on a string?

2
angularangular8

2 Answers

0
votes

You are performing 2 way data binding with [(ngModel)] on the <option> for a start. This would need to go on the <select> And then you can set the [value]="pricingTemplate.name" of option within the ngFor loop and this will get picked up by the select element.

<select id="pricingtemplates" name="ddlPricingTemplate" [(ngModel)]="customer.pricingTemplateName">
   <option *ngFor="let pricingTemplate of customer.pricingTemplatesList" [value]="pricingTemplate.name">
     {{pricingTemplate.name}}
   </option>
</select>