I am currently working on dynamically assigning attributes to HTML tags (such as Select, Button, or Input) within a switch statement. However, I'm a bit stuck and would appreciate any better ideas or suggestions you may have.
My goal is to identify whether the label inside the switch corresponds to a Select, Button, or Input, but I'm having trouble figuring it out and navigating through the code.
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appSetValitadions]'
})
export class SetValitadionsDirective {
validations = [
{
typeTagHTML: "select", //(Input, Select)
tagName: "btnSaveDoc",
required: "true",
readonly: "true",
title: "Example title",
Icon: ""
},
{
typeTagHTML: "input",
tagName: "btnSaveDoc",
required: "false",
readonly: "false",
title: "Example title",
Icon: ""
},
{
typeTagHTML: "button",
tagName: "btnSaveDoc",
required: "false",
readonly: "false",
title: "Example title",
Icon: ""
}
]
constructor(el: ElementRef, renderer: Renderer2) {
this.setAttributes(el);
}
setAttributes(el: ElementRef){
let validation;
//PROBLEM
switch (el.nativeElement.tag) {
case "input":
validation= this.validations.find(validation => validation.tagName == el.nativeElement.name);
el.nativeElement.setAttribute("required", validation?.required);
el.nativeElement.setAttribute("readonly", validation?.readonly);
break;
case "select":
validation = this.validations.find(validation => validation.tagName == el.nativeElement.name);
el.nativeElement.setAttribute("required", validation?.required);
el.nativeElement.setAttribute("readonly", validation?.readonly);
break;
case "button":
validation = this.validations.find(validation => validation.tagName == el.nativeElement.name);
el.nativeElement.setAttribute("title", validation?.title);
break;
default:
break;
}
}
}