Angular component input with dynamic id and name not working

Question

I have the following list of components, which take an id and label value as properties.

<ul>
   <li>
     <btn-attatch
      id="one"
      label="label1"
      (file)="specialFileType($event)"
      >
      </btn-attatch>
   </li>
   <li>
      <btn-attatch
       id="two"
       label="label2"
       (file)="specialFileType($event)"
      >
      </btn-attatch>
   <li>
</ul>

Inside my component I set the following template and values accordingly:

 <input
  type="file"
  [attr.name]="id"
  [attr.id]="id"
  (change)="fileChange($event.target.files)"
  class="inputfile"
  />
  <label *ngIf="!fileName" [attr.for]="id">{{ label }}</label>

  private _id: string;
  @Input() set id(s: string) {
    this._id = s;
  }
  get id() {
    return this._id;
  }

  private _label: string;
  @Input() set label(s: string) {
    this._label = s;
  }
  get label() {
    return this._label;
  }

My issue is that when i am setting fixed values in the input and label inside the component , as opposed to sending in those values via @Input, everything works. Once I try to dynamicaly set the id and labels via @Input, the input becomes unclickable.

Yipin Xiong · Accepted Answer · 2020-10-25 04:01:48Z

3

I fixed the issue by changing the input attribute name from id to identifier.

That is, @Input() id => @Input() identifier

It seems that Angular will get confused when parsing the id attribute on a component.

By the way, I implemented the ControlValueAccessor Interface for my customised component.

answered Oct 25, 2020 at 4:01

Yipin Xiong

474 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blazkovicz · Accepted Answer · 2024-09-23 10:45:45Z

Custom component appears in html with id attribute also, so page has 2 elements with same id attribute, and the first one is not the input in the dom tree, and browser does not bind it to label.

One way to solve is to use another attribute name for id, like fieldId, inputId anything. Another was is to remove id attribute from component's native element after view init:

constructor(private el: ElementRef) {}
ngAfterViewInit() { this.el.nativeElement.id = ''; }

Collectives™ on Stack Overflow

Angular component input with dynamic id and name not working

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related