Topic: MDBSELECT2 (Bug?) - Does not update selected option when value is 0

malte premium asked 3 years ago


Expected behavior The option with the value of the form control should be selected even if the value is int 0. Actual behavior "Please select Option" is still shown. Resources (screenshots, code snippets etc.) I have an address form with a select box for salutation. The form is only shown if I select an address to edit.

Adress Object:

{
    id: number;
    salutation: AddressSalutationEnum;
    title: string;
    firstName: string;
    lastName: string;
    company: string;
    street: string;
    addition: string;
    houseNo: string;
    zip: string;
    city: string;
    state: string;
    country: ICountryModel;
    phoneDialCode: ICountryDialCodeModel;
    phone: string;
    mobileDialCode: ICountryDialCodeModel;
    mobile: string;
    isDefaultShippingAddress: boolean;
    isDefaultInvoiceAddress: boolean;
}

AdressSalutationEnum

export enum AddressSalutationEnum {


        /** The mr **/
        MR = 0,
        /** The MRS **/
        MRS = 1,
        /** The diverse **/
        DIVERSE = 2,
        /** The idontevenknow **/
        IDONTEVENKNOW = 3
}

Snipped from my from with the select:

<form [formGroup]="form" (submit)="submitForm()">
    <div class="row">
        <div class="col col-4">
            <div class="md-form">
                <mdb-select-2
                    [placeholder]="L.ADDRESS.LB_SALUTATION | lng"
                    [label]="L.ADDRESS.LB_SALUTATION | lng"
                    [formControl]="form.controls.salutation"
                    #salutation
                >
                    <mdb-select-option *ngFor="let option of availableSalutation" [value]="option.value">{{
                        option.label | lng
                    }}</mdb-select-option>
                </mdb-select-2>
            </div>
        </div>
    </div>
</form>

Available salutations array:

this.availableSalutation.push({
    value: AddressSalutationEnum.MR,
    label: this.L.SALUTATIONS.MR,
});
this.availableSalutation.push({
    value: AddressSalutationEnum.MRS,
    label: this.L.SALUTATIONS.MRS,
});

this.availableSalutation.push({
    value: AddressSalutationEnum.DIVERSE,
    label: this.L.SALUTATIONS.DIVERSE,
});

this.availableSalutation.push({
    value: AddressSalutationEnum.IDONTEVENKNOW,
    label: this.L.SALUTATIONS.IDONTEVENKNOW,
});

Seems like when I update the form with { salutation: Enum.Mr } if wont do anything because the enum value for Mr is 0.

Current Workarround is to set the enum values to start with 1.

Is there any other soulution than changing all of my enums (i whould have to change them in c# also)?


Grzegorz Bujański staff commented 3 years ago

Hi. This error occurs after selecting the option manually by clicking? I tried to reproduce this error and I can select an option with value = 0


malte premium commented 3 years ago

Hi! It happens when I Update the form Control or whole form with this.form.setValue( { salutation:0}) or this.form.controls.salutation.setValue(0)


Grzegorz Bujański staff commented 3 years ago

I think I know what could be wrong. Value should be a string, not a number. Try this.form.setValue( { salutation:'0'}) or this.form.controls.salutation.setValue('0').


malte premium commented 3 years ago

Hi! Didnt worked. Because the value of the enum item is 0 (int). But the AbstractFormControl is updated (both way as number or as string). Only the select does not show it when its updated with a 0.

Instead if I set the control value to 1 or 2 it works as expected. I rewrote the enums now to start from 1 now it works :-)


Grzegorz Bujański staff commented 3 years ago

Ok. I'm glad it fixed this problem :)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: PC
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No