Different mdbInput labels depending on whether active or not

Topic: Different mdbInput labels depending on whether active or not

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.

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

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 commented 5 years ago

I created a slightly modified solution version. But the solution in general 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

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

1001albertpadilla

214Support score
35Questions 4Answers

0Snippets likes 0Snippets