Dropdown display value getting populated in the id property of the mode instead of actual id in Angular

Question

I have implemented a dropdown that is populating correctly in my angular application but when i try to submit my form , it is showing the display text in the model instead of the Id. What could be the problem To my knowledge all i need is

[(ngModel)]="newJob.customerId

UI

<label for="customer">Customer</label>
  <select name="customer" required #customer="ngModel" ngModel placeholder="Please select"   [(ngModel)]="newJob.customerId">
    <option [ngValue]="undefined" selected>Please select</option>
    <option *ngFor="let customer of customers"  >{{customer.name}} </option>
  </select>
  <small *ngIf="customer.invalid">Please select a customer</small>

Component

  public createJob(form: NgForm): void {
    if (form.invalid) {
      alert('form is not valid');
    } else {
      console.log(this.newJob);
      this.jobService.CreateJob(this.newJob).then(() => {
        this.jobService.GetJobs().subscribe(jobs => this.jobs = jobs);
      });
    }
  }

Model

export interface JobModel {
  jobId: number;
  engineer: string;
  customerId: number;
  customerName: string;
  when: Date;
}

Update

Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":400,"statusText":"Bad Request","url":"http://localhost:63235/job","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:63235/job: 400 Bad Request","error":{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"|9e7e208d-44c84ff36cde4107.","errors":{"$.customerId":["The JSON value could not be converted to System.Int32. Path: $.customerId | LineNumber: 0 | BytePositionInLine: 50."]}}}

Can you please share your `customers` array? – yurzui Aug 07 '20 at 03:48 — yurzui, Aug 07 '20 at 03:48

Jacob P · Answer 1 · 2020-08-07T03:20:40.423

0

You need a value on each option inside of the select, otherwise the default is the display value. Try this:

<option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.name}} </option>

edited Aug 07 '20 at 03:20

answered Aug 07 '20 at 03:11

Jacob P

148
5

The object is containing the following value customerId: "customer.customerId" – Tom Aug 07 '20 at 03:15

yurzui · Answer 2 · 2020-08-07T03:58:00.277

0

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

value

The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

So, you must provide value for your <option> tags:

<option *ngFor="let customer of customers" [value]="customer.customerId">
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  {{customer.name}}
</option>

If you have scrict validation on your server-side where it's required newJob.customerId to be a number then you should be using ngValue instead otherwise you will be getting it as a string:

<option *ngFor="let customer of customers" [ngValue]="customer.customerId">

edited Aug 07 '20 at 03:58

answered Aug 07 '20 at 03:13

yurzui

205,937
32
433
399

I can see the proper value using your logic but get an error {"$.customerId":["The JSON value could not be converted to System.Int32. Path: $.customerId | LineNumber: 0 | BytePositionInLine: 50."]}}} – Tom Aug 07 '20 at 03:21
https://stackoverflow.com/questions/57626878/the-json-value-could-not-be-converted-to-system-int32 – Jacob P Aug 07 '20 at 03:24
@jacob , why do you say used wrong property {{customer.name}}. Customers object is what gets populated in the component to display in the dropdown. – Tom Aug 07 '20 at 03:30
newJob which is an object of JobModel needs to be poulated on the client UI and submitted – Tom Aug 07 '20 at 03:31
@Tom I didn't say that. The important thing in my answer was the `[value]="customer.customerId"`. It's actually the same as @yurzui's answer. You still want the customer name to be what is displayed in the drop down correct? That is what {{customer.name}} does. – Jacob P Aug 07 '20 at 03:35
@Tom I changed `customer.id` to `customer.customerId` – yurzui Aug 07 '20 at 03:36
Yes Jacob, Sorry i misunderstood you. – Tom Aug 07 '20 at 03:36
@yurzui where does customer.customer.Id come from? I dont have any id of customer – Tom Aug 07 '20 at 03:38
@Tom I was a typo. Sorry – yurzui Aug 07 '20 at 03:39
customerId: "2" customerName: null customerType: null engineer: "Ashley" jobId: null when: "2020-08-07" – Tom Aug 07 '20 at 03:40
@yurzui. I was using customer.customerId itself – Tom Aug 07 '20 at 03:40
As you can see i am getting the id is what i mentioned. But when i submit the form , I am getting the error that in the post – Tom Aug 07 '20 at 03:41
Can you please update your post with the actual `body` you're sending to the server? – yurzui Aug 07 '20 at 03:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219383/discussion-between-tom-and-yurzui). – Tom Aug 07 '20 at 03:52

Dropdown display value getting populated in the id property of the mode instead of actual id in Angular

2 Answers2