Отображаемое значение раскрывающегося списка заполняется в свойстве id режима вместо фактического идентификатора в Angular

Question

Я реализовал раскрывающийся список, который правильно заполняется в моем приложении angular, но когда я пытаюсь отправить свою форму, он показывает отображаемый текст в модели вместо идентификатора. В чем может быть проблема Насколько мне известно, все, что мне нужно, это

[(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>

Компонент

  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);
      });
    }
  }

Модель

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

Обновление

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."]}}}

Answer 1

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

value

Содержимое этого атрибута представляет значение, которое будет отправлено с формой, если этот параметр будет выбран. Если этот атрибут опущен, значение берется из текстового содержимого элемента option .

Итак, вы должны укажите значение для ваших тегов <option>:

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

Если у вас есть строгая проверка на стороне сервера, где требуется, чтобы newJob.customerId было числом , тогда вы должны использовать ngValue , иначе вы получите его как строку:

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

Answer 2

Вам нужно значение для каждого параметра внутри выбора, в противном случае по умолчанию используется отображаемое значение. Попробуйте это:

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