I have a requirement to create a custom textbox that can handle different display names for two separate textboxes - one for firstName and the other for LastName. Is there a way to achieve this by adding a displayName property in the UI side? For example, I want the error message for the first textbox to be "FirstName is required" instead of "LastName is required". Can this customization be implemented?
Attached screenshot for reference.
textbox.html
<input type="text" value.bind="myval & validate">
textbox.ts
export class textbox {
@bindable displayName: string = 'firstName';
}
ValidationRules
.ensure('myval').displayName('First Name')
.required()
.on(textbox);
app.html
<template>
<require from="./components/textbox"></require>
<textbox></textbox>
<textbox></textbox>
</template>