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

This issue has been created 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-04
Star Count 84139
Watcher Count 3064
Fork Count 22243
Issue Count 1206

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
default auto-stop duration is too short 2 2022-08-10 2022-08-18
Improve UX of disabled auto-start/stop 2 2022-08-10 2022-08-18
ADD compression to static_files and stdout blobs in db 1 2021-11-10 2022-08-02
ValueError: zero-size array to reduction operation maximum which has no identity 2 2020-05-15 2022-07-20
Imposto de renda com acordo de bitributação 7 2019-12-28 2022-05-14
Renaming dups based on refs. 2 2021-04-15 2022-08-02
program can't read Japanese characters 1 2021-04-28 2022-09-01
publish: false files are deleted after npm run publish 0 2021-11-22 2022-08-24
The component textures or textures' path should be stored in hazel file 0 2021-11-25 2022-08-30
My custom formats break copy/paste 6 2022-01-04 2022-10-02
Why is it saying it needs cue sheet? Why would I use it if I had it? 2 2021-06-12 2022-09-25
Implement `getppid` syscall 0 2021-11-01 2022-09-29
Think about API abstraction 0 2019-07-29 2022-07-20
Sliders stop when browser looses focus 6 2016-06-22 2022-09-07
infiniteLoop cannot be executed when double-clicking on the last slide 0 2020-04-03 2022-10-01
Links in sliders aren't working - Error in the latest version of Chrome (73.0.3683.75) 101 2019-03-14 2022-09-07
[Suggestion] Migrate to Microsoft's official Windows API crate from winapi 1 2021-01-22 2022-09-27
TweenManager.frameBased not working as expected 1 2021-03-15 2022-09-27
QUESTION: what is the difference between `adj-in` and `local` in cli 1 2021-02-17 2022-01-26
What happens if you delete a file outside of sftpgo when using object storage? 2 2021-12-01 2022-09-19
Diff view is not colorblind friendly 6 2021-12-24 2022-07-01
Installation error and “ERROR - 500” Post Installation on AWS EC2 with RDS as Remote MySQL Server 5 2022-07-24 2022-09-22
Using this in my app thanx 2 2018-12-04 2022-09-24
SetGroupPermissions not working at all 1 2021-09-25 2022-09-12
Idiomatic way to version control (dotfiling) doom configs? 6 2021-08-03 2022-07-28
plugin doesn't work on Windows 4 2021-09-16 2022-09-23
Unresponsive page when trying to update project categories bug 6 2022-08-11 2022-09-26
cmake installing symlinks is not DESTDIR aware 1 2022-08-21 2022-09-23
Getting <redacted> in crash logs in on-premise integration 15 2021-10-07 2022-09-21
Output's lines are split on -char-limit 1 2022-05-20 2022-09-27
ims_usrloc_pcscf can not read protocol field from mysql DB's location table 3 2021-10-06 2022-08-16
With Or Without document inaccurate 0 2020-10-26 2022-09-23
Unable to access web server and failed to poll device 1 2021-05-27 2022-09-11
Add xdg-output server protocol 0 2019-11-12 2022-08-14
KCL 2.3.0 - Intermittent shard connectivity loss with recurring error "Last request was dispatched at ... Cancelling subscription, and restarting" 1 2021-06-13 2022-09-30
Trace results should be shown one at a time 3 2021-07-19 2022-01-02
Cannot run Program under Windows 5 2018-05-31 2022-09-22
Don't assume paths are always valid UTF8 13 2018-08-29 2022-01-10
cloudtest: Introduce a K8sApplication(K8sResource) 1 2022-07-19 2022-09-28
模型量化int8后,时间增加。 3 2021-09-22 2022-01-18
求指导路由刷了openwrt,如何导入ssr节点 1 2021-11-07 2022-08-04
Add EDATEC CM4 Industrial Computer 1 2021-07-08 2022-09-12
Pique Theme - Cannot Set the Background to white 1 2022-03-23 2022-09-28
setting recaptcha.host borks baseURL, setting baseurl sets recaptcha.host to google. 3 2022-01-19 2022-09-28
Show multiple images when in `index` 0 2021-08-11 2022-09-15
write EPIPE error while proxying Websocket requests 3 2022-06-24 2022-09-28
OAuth2.0 signature validation failing for HS256 algorithm with base64 encoded symmetric key 1 2021-09-06 2022-09-23
Avoid duplicate AOP proxy class definition with FilteredClassLoader 0 2021-11-06 2022-01-20
Specify all source-built dependencies and ensure they are regularly updated 0 2022-08-29 2022-09-12
Add option in awc to try parsing json regardless of content-type 1 2021-09-11 2022-10-03