MDB5 and Char-Counter


Topic: MDB5 and Char-Counter

malte pro premium asked 3 years ago

Currently im switching my project from MDB4 to MDB5. Many fields in my forms used the character counter to display the user the amount of characters left.

I cant find anything like that in MDB5. Is it removed or will be added in later versions?


Arkadiusz Idzikowski staff answered 3 years ago

@malte Such a directive is currently not available in MDB5 Angular but I added it to our to-do list. As a workaround for now you can use this custom solution:

HTML:

<mdb-form-control>
  <input mdbInput [formControl]="input" type="text" id="form1" class="form-control" />
  <label mdbLabel class="form-label" for="form1">Example label</label>
</mdb-form-control>
<div>Character count: {{ characterCount }} / {{ maxLength }}</div>

TS:

  input = new FormControl();

  characterCount = 0;
  maxLength = 15;

  constructor() {}

  ngOnInit(): void {
    this.input.valueChanges.subscribe(value => {
      this.characterCount = value.length;
    })
  }

Edit: This implementation is now available in the input documentation: https://mdbootstrap.com/docs/angular/forms/input-fields/#section-character-counter


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: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: PC
  • Browser: Chrome
  • OS: WIndows 11
  • Provided sample code: No
  • Provided link: No