Topic: Different mdbInput labels depending on whether active or not

1001albertpadilla free asked 3 years ago


How can I have different mdbInput labels depending on whether the mdbInput has value or not? For example, I want the label "* Last Name" if there's no value. But only "Last Name" if value is written.

I'm trying to attach an image but the upload always fails.


Bartosz Termena staff answered 3 years ago


Dear @1001albertpadilla

Try to use *ngIf directive to get this effect:

HTML:

<div class="md-form">
        <input
          (keyup)="onInput($event.target.value)"
          mdbInput
          type="text"
          id="form1"
          class="form-control"
        />
      <label for="form1" *ngIf="value.length > 0" class="">Last Name</label>
      <label for="form1" *ngIf="value.length === 0" class="">* Last Name</label>
 </div>

TS:

 value = '';
  onInput(e: string) {
    this.value = e;
  }

Hope it helps!

Sorry for the upload failure, we will try to fix it as soon as possible

Best Regards, Bartosz.


1001albertpadilla free commented 3 years ago

I created a slightly modified solution version. But the solution in general works! Thanks!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: 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