I am interested in creating a custom Angular directive for a placeholder.
Here is the code snippet for the directive:
class CustomDirective {
restrict: string = "A";
link = (scope: ng.IScope,
instanceElement: ng.IAugmentedJQuery,
instanceAttributes: ng.IAttributes,
controller: any,
transclude: ng.ITranscludeFunction) => {
instanceElement.val((<any>instanceAttributes).tsplaceholder);
instanceElement.on("focus", (eventObj: JQueryEventObject) => {
if (instanceElement.val() === (<any>instanceAttributes).tsplaceholder) {
instanceElement.removeClass("gray-textbox");
instanceElement.val("");
}
});
instanceElement.on("blur", (eventObj: JQueryEventObject) => {
if (instanceElement.val() === "") {
instanceElement.addClass("gray-textbox");
instanceElement.val((<any>instanceAttributes).tsplaceholder);
}
});
instanceElement.addClass("gray-textbox");
}
}
taxSimpleApp.directive("tsplaceholder", () => {
return new CustomDirective();
});
The HTML code I am using is shown below:
<input name="ssn2"
id="jenish"
type="text"
required
ng-model="myVal"
tsplaceholder="XXX-XX-XXXX">
I am working with Angular and TypeScript, but there seems to be an issue in the example provided. The value property does not display the placeholder on the first load, only after the initial focus event.
I am unsure why the value("XXX-XX-XXXX") does not appear initially.
Thank you in advance for any assistance.