Блог

В моем приложении Angular у меня есть <select> привязка к реактивной форме, подобной следующей:

 <form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [value]="value" *ngFor="let value of mySelectValues">{{ value }}</option>
  </select>
</form>
  

На данном этапе mySelectValues представляет собой массив строк.

Я провожу компонентное dom-тестирование следующим образом:

 it('the select should reflect the form value"', () => {

  // I somehow change the form value to 'ABC' here 
  // and I want to check if the select is correctly showing the change

  const select = fixture.nativeElement.querySelector('#my-select');
  expect(select.value).toEqual('ABC');
});
  

Это работает нормально. Однако в какой-то момент в некоторых выборках мне понадобилось иметь объекты в качестве значений вместо простых строк / чисел в некоторых местах.

Итак, я изменил свой HTML-код, чтобы использовать [ngValue] вместо [value] :

 <option [ngValue]="value" ...
  

На данный момент в моем тесте значение select.value больше не 'ABC' , а становится чем-то вроде '2: ABC' где 2 — индекс выбранного параметра, затем столбец пробел, затем фактическое значение.

Пока я могу смириться с этим, просто изменив свой тест на:

 expect(select.value).toEqual('2: ABC');
  

И это продолжает работать. Однако в некоторых местах мне нужно использовать Объекты в качестве значений, поэтому mySelectValues это будет не массив простых строк / чисел, а массив объектов.

Например:

 mySelectValues = [
  { name: 'Name 1', value: 'MyTestValue1' },
  { name: 'Name 2', value: 'MyTestValue2' },
];
  

И поэтому меняем HTML следующим образом:

 <form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [ngValue]="object.value" *ngFor="let object of mySelectValues">{{ object.name }}</option>
  </select>
</form>
  

Выбор теперь отлично работает с объектами. Однако мой тест больше не работает, потому что select.value теперь всегда возвращает значения типа '2: Object' , потому что объект выбран и больше не является простой строкой.

Как я могу решить эту проблему?

Другими словами: учитывая, <select> который использует <option> с [ngValue] привязкой к объектам, как я могу получить выбранное значение <select> (доступ к нему через DOM, как в моем исходном тестовом примере)?