Can't set array values in select elements using Formbuilder in Angular

Question

I have this edit function. Only the select element does not update the value

invoice-update.component.ts

onUpdate(invoice) {
 console.log(invoice.customer)

 const control = <FormArray>this.form.controls['purchases'];
 control.controls = [];

 this.form.controls['$key'].setValue(invoice.$key);
 this.form.controls['customer'].setValue(invoice.customer);//this is the problem

 for (let i in invoice.purchases) {
   const product = (invoice.purchases[i].product);
   const quantity = (invoice.purchases[i].quantity);
   this.addPurchase(product);
   control.at(+i).get('quantity').setValue(quantity);
 }
}

Although the value is set in the select element, it does not allow updating the value, because it expects an array

Stackblitz

We can safely say that your stackblitz is far from a minimal reproducible example Don't get me wrong, Great that you have a stackblitz :) but there is just too much code. — AVJT82
– AVJT82, Commented Apr 18, 2019 at 17:57

Sumit Parakh · Accepted Answer · 2019-04-22 18:32:59Z

1

It is not updating because your Invoice model accept Customer object but you are passing just a name.

export class IInvoice {
  $key?: string;
  invoiceNumber?: number;
  createdAt?: string;
  modifiedAt?:string;
  uid?: string;

  customer: Customer; // Currently you are passing string to this key.
  purchases: Purchase[];
  totalPrice: number;
}

Replace item.name by item. Update your select code from this:

 <select class="form-control custom-select" id="customer" formControlName="customer">
         <option [ngValue]="true">-Customer-</option>

         <option [ngValue]="item.name" *ngFor="let item of customerList" >{{item.name}} {{item.lastname}}</option>
 </select>

to this:

 <select class="form-control custom-select" id="customer" formControlName="customer">
         <option [ngValue]="true">-Customer-</option>

         <option [ngValue]="item" *ngFor="let item of customerList" >{{item.name}} {{item.lastname}}</option>
 </select>

And then it will work.

To set selected customer as default value in dropdown, you can use compareWith property. This property accepts function parameter. Just add following property in select tag:-

[compareWith]="compareFn"

And define compareFn function like this:-

compareFn(c1: any, c2:any): boolean {
   return c1 && c2 ? c1.name === c2.name : c1 === c2;
}

Now default customer should be set as expected based on selected data.

edited Apr 22, 2019 at 18:32

answered Apr 18, 2019 at 18:12

Sumit Parakh

1,1639 silver badges19 bronze badges

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

4 Comments

Rafael Corzo Over a year ago

Thank. I try this, but now not set value selected when i make click in the row

Sumit Parakh Over a year ago

@RafaelCorzo . you can try to utilize compareWith property to select proper value netbasal.com/… angular.io/api/forms/SelectControlValueAccessor

Drenai Over a year ago

Is IInvoice suppose to be an interface?

Rafael Corzo Over a year ago

Thank @Sumit_Parakh. My solution, complemenatry with the first answer, was this. compareFn(c1: any, c2:any): boolean { return c1 && c2 ? c1.name === c2.name : c1 === c2; }. Please add this code in your first answer and my vote is for you

Collectives™ on Stack Overflow

Can't set array values in select elements using Formbuilder in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related