Different mdb-select labels depending on whether a value has

Topic: Different mdb-select labels depending on whether a value has been selected or not

1001albertpadilla free asked 5 years ago

How can I have different mdb-select labels depending on whether a value has been selected or not? For example, I want the label "* Department" if there's no selected value. But only "Department" if a value has been selected. mdb-select is set to start with a blank option.

Arkadiusz Idzikowski staff commented 5 years ago

How do you set the default value? Do you use reactive or template-driven forms?

1001albertpadilla free commented 5 years ago

        <mdb-select [(ngModel)]="employee.department.id" [options]="departments" name="departmentId" id="departmentId"
                    [optionHeight]="25" label="Department"></mdb-select>

departments -- is a regular array of Department object populated inside the ts file.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear <a href="/profile/?id=60026" target="_blank" rel="nofollow">@1001albertpadilla</a>

Do you mean this effect?:

HTML

TS

<pre class="prettyprint"><code> selected = '';
 dateOptionsSelect = [
 { value: '1', label: 'Today' },
 { value: '2', label: 'Yesterday' },
 { value: '3', label: 'Last 7 days' },
 { value: '4', label: 'Last 30 days' },
 { value: '5', label: 'Last week' },
 { value: '6', label: 'Last month' },
 ];

getSelectedValue(event: any) {
 this.selected = event;
 }
 getLabel() {
 if (this.selected === '') {
 return true;
 } else {
 return false;
 }
 }
</code></pre>

Hope it helps!

Best Regards, Bartosz.

Please insert min. 20 characters.

Dear @1001albertpadilla

Do you mean this effect?:

HTML

 <mdb-select
        (ngModelChange)="getSelectedValue($event)"
        [(ngModel)]="selectedValue"
        [options]="dateOptionsSelect"
        [label]="getLabel() ? '*Department' : 'Department'"
      ></mdb-select>

  selected = '';
  dateOptionsSelect = [
    { value: '1', label: 'Today' },
    { value: '2', label: 'Yesterday' },
    { value: '3', label: 'Last 7 days' },
    { value: '4', label: 'Last 30 days' },
    { value: '5', label: 'Last week' },
    { value: '6', label: 'Last month' },
  ];

  getSelectedValue(event: any) {
    this.selected = event;
  }
  getLabel() {
    if (this.selected === '') {
      return true;
    } else {
      return false;
    }
  }

Hope it helps!

Best Regards, Bartosz.

1001albertpadilla free commented 5 years ago

I did some simplifications. But the general solution works! Thanks!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.5.3
Device: Laptop
Browser: Chrome
OS: Win 10
Provided sample code: No
Provided link: No

1001albertpadilla

214Support score
35Questions 4Answers 0Snippets