Select attribute "multiple" always generates an array as resulting model

This issue has been tracked since 2022-09-08.

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

By specification, the multiple attribute in a select should be boolean.

The browsers seem to respect this attribute well, but in Angular I always get an array (model) as soon as the attribute is given, no matter what the value is.

This means that the use of <select [multiple]="dynamicValue">...</select> for single selects (with dynamicValue = false) is cumbersome because the resulting model is always an array.

Please provide a link to a minimal reproduction of the bug

https://angular-ivy-xzpi8z.stackblitz.io

Please provide the exception or error you saw

Number 2 in the example link shows unexpected an behavior.

Please provide the environment you discovered this bug in (run ng version)

Angular 14 (see Stackblitz)

Anything else?

No response

Totati wrote this answer on 2022-09-08

Angular uses two different selectors for Select and select multiple . They can't be changed during runtime. You have to *ngIf your select.

Also duplicate of #44399

andreas-aeschlimann wrote this answer on 2022-09-08

Angular uses two different selectors for Select and select multiple . They can't be changed during runtime. You have to *ngIf your select.

Ah, bummer, thank you for your reply.

I'll provide my current workaround in case other people have this issue:

I implemented a conditional attributes directive now instead, which manually adds attributes when needed. The example is inspired by suggestions on Stackoverflow:

import { Directive, ElementRef, Input, OnChanges, Renderer2 } from "@angular/core";

@Directive({selector: "[attributes]"})
export class ConditionalAttributesDirective implements OnChanges {

    @Input("attributes") conditionalAttributes: { [key: string]: any } = {};

    constructor(private elementRef: ElementRef,
                private renderer: Renderer2) {}

    ngOnChanges() {
        for (let attribute in this.conditionalAttributes) {
            const value = this.conditionalAttributes[attribute]
            if (value !== undefined) {
                this.renderer.setAttribute(this.elementRef.nativeElement, attribute, value);
            } else {
                this.renderer.removeAttribute(this.elementRef.nativeElement, attribute);
            }
        }
    }

}

Then, you can manually add any attributes through a key-value object. If a value is set to undefined, the attribute is not added and it works as expected:

<select  [attributes]="{multiple: allowMultiple ? true : undefined}" ......></select>
JoostK wrote this answer on 2022-09-08

@Totati is correct here; this is a limitation of how control value accessorts are applied statically. Closing as a duplicate of #13243.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84152
Watcher Count 3063
Fork Count 22247
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date