Angular 8 set selected value in dropdown based on string

Question

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:

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?

Vibhanshu Biswas · Accepted Answer · 2019-08-28 09:34:33Z

1

Use the compareWith check the link https://netbasal.com/understanding-the-comparefn-input-in-angular-v4-4a401ef4fc4c

answered Aug 28, 2019 at 9:34

Vibhanshu Biswas

3872 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashant Pimpale · Accepted Answer · 2019-08-28 09:46:15Z

0

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>

edited Aug 28, 2019 at 9:46

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Aug 28, 2019 at 9:38

Sam

1,87111 silver badges19 bronze badges

4 Comments

Laziale Over a year ago

Thanks @Sam but I'm still getting this error "No value accessor for form control with unspecified name attribute"

Laziale Over a year ago

This is what I did in the option line: <option *ngFor="let pricingTemplate of customer.pricingTemplatesList" [(ngModel)]="customer.pricingTemplateName" value="customer.pricingTemplateName">{{pricingTemplate.name}}</option>

Sam Over a year ago

I have provided an example of what i mean.

Laziale Over a year ago

Thanks, that works, the only thing you were missing were the double brackets which I added for the [value] in the option control. Thanks again!

Collectives™ on Stack Overflow

Angular 8 set selected value in dropdown based on string

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related