How to change attributes dynamically with directive?

Question

I am trying to get the HTML tag (Select, Button or Input) to assign the attributes dynamically but I don't know how I can do it in the switch, and if you have a better idea I would appreciate it if you could share it

I want to recognize inside the switch in the label is a or or , but I don't get it I'm a bit lost

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;
    }
  }

}

Yogi · Accepted Answer · 2021-09-18 12:28:20Z

you're accessing wrong property in your switch it should be el.nativeElement.tagName instead of el.nativeElement.tag

as a sidenote, you can modify your validations array to turn into an object so that key represents HTML tag name and value is attributes you want to attach to it.

const validations = {
    'A': { 
        attrs: {
            required: "true", 
            readonly: "true",
            title: "Example title",
            Icon: "" 
        }
    },
    'INPUT': {
        attrs: {
            required: "false", 
            readonly: "false",
            title: "Example title",
            Icon: "" 
        }
    }
}

and then apply attributes to given HTML element like this:

constructor(el: ElementRef, renderer: Renderer2) {
    this.setAttributes(el.nativeElement);
}

setAttributes(el: HTMLElement) {
    const attrs = validations[el.tagName].attrs;
    Object.keys(attrs).forEach(attrName => {
        el.setAttribute(attrName, attrs[attrName]);
    });

}

Collectives™ on Stack Overflow

How to change attributes dynamically with directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related