feat: counterFormatter for counter string in ion-item

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Introduced in v6 is the ability for developers to use counter with an ion-item, to display max length validation to the user. Developers should have complete control over the formatted appearance of this counter. Currently they are stuck with 5 / 10 formatting.

Describe the Use Case

Users that are less technical or are unfamiliar of max length formatting, may be confused when seeing a 5 / 10 label. This feature would allow developers to customize the format of the display to say "4 characters remaining" or "5 out of 10 words".

Describe Preferred Solution

ion-item exposes a formatter function that takes in the input's text content length and the max length validation and returns a formatted string.

Describe Alternatives

No response

Related Code

counterFormatter(inputLength, maxLength) {
   return `${maxLength - inputLength} characters remaining`;
}

<ion-input [counter]="true" [counterFormatter]="counterFormatter">
   <ion-label position="stacked">Input</ion-label>
   <ion-input maxlength="20"></ion-input>
</ion-input>

Additional Information

No response

[sean-perkins]

This feature will be available in the upcoming 6.1.0 release.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.