# AUR0654

## Error Message

`AUR0654: Array values can only be bound to a multi-select.`

## Description

This error occurs when you attempt to bind an array object from your view model to the `value` property of an HTML `<select>` element, but the `<select>` element is missing the `multiple` attribute. Standard single-selection `<select>` elements can only have their `value` bound to a single value (typically a string or number corresponding to one of the `<option>` values), not an array of values.

## Cause

The direct cause is a mismatch between the data type being bound (an array) and the expected data type for a single-selection `<select>` element's value (a single primitive value).

1. **Binding an Array Intentionally:** You intended to create a multiple-selection list but forgot to add the `multiple` attribute to the `<select>` tag.
2. **Binding an Array Unintentionally:** The view model property bound to the `<select>` element's `value` happens to hold an array value when you expected it to hold a single string or number. This could be due to logic errors in your view model or data transformation issues.

## Solution

1. **Add `multiple` Attribute:** If you intend for the user to be able to select multiple options and your view model property is an array, add the `multiple` attribute to your `<select>` element.

   ```html
   <select value.bind="selectedItems" multiple>
     <!-- options -->
   </select>
   ```
2. **Bind a Single Value:** If the `<select>` element should only allow a single selection, ensure that the view model property you bind to its `value` holds a single primitive value (string, number) that corresponds to one of the `<option>` values, not an array. Adjust your view model logic if necessary.

   ```html
   <select value.bind="selectedItem">
     <!-- options -->
   </select>
   ```

   ```typescript
   // View Model
   export class MyViewModel {
     selectedItem: string = 'option2'; // Bind a single value
     // selectedItems: string[] = ['option1', 'option3']; // Don't bind this array to a single-select
   }
   ```

## Example

```html
<!-- Incorrect: Binding an array to a single-select element -->
<select value.bind="selectedColors">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- Correct (Multiple Selection): Add the 'multiple' attribute -->
<select value.bind="selectedColors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- Correct (Single Selection): Bind a non-array property -->
<select value.bind="selectedColor">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
```

```typescript
// View Model
export class MyViewModel {
  // For multi-select
  selectedColors: string[] = ['red', 'blue'];

  // For single-select
  selectedColor: string = 'green';

  availableColors = ['red', 'green', 'blue']; // Example source for options
}
```

## Debugging Tips

* Check the `<select>` element in your HTML template. Does it have the `multiple` attribute?
* Inspect the value and type of the view model property bound to the `<select>` element's `value`. Use `console.log(typeof this.myProperty, this.myProperty)` or breakpoints.
* If it's an array, decide whether the select should be `multiple` or if the bound property should hold a single value instead of an array. Adjust the template or view model accordingly.