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.

   <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.

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

   // 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

<!-- 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>

// 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.