Dynamically set name attribute to input field in Angular

Question

I am trying to dynamically set the name attribute to my input fields I have in a data table in Angular inside of an *ngFor. However, I am seeing when I go to console.log the event of in my filter method on keyup in the fields, there is no name being set for each input. How do add these names dynamically?

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols" 
            (click)="selectColHeader(col.prop); 
            col.enableSort && sort(col.prop)"
            role="button">
                <label>{{col.header}}</label>
                <input type="text"
                aria-label="search text field"
                name="{{col.header}}" <-- not being set
                ngModel
                placeholder="search..."
                (click)="$event.stopPropagation()"
                (keyup)="filterData($event)"
                *ngIf=col.enableFilter/>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data |
        filter: fields:selectedInput |
        paginate: { itemsPerPage: 6, currentPage: page, id: id }">
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

table.component.ts

  filterData(e){
    console.log(e.target.name) <--- name is a blank string 
    console.log(e)
    this.fields = e.target.value
  }

There's nothing wrong with your code. I copied it and it worked for me. This suggests that the issue is with col.header. Perhaps it doesn't have a value. try changing the click event to pass in the col object and console log to check to see if the header has a value. — David Anthony Acosta
– David Anthony Acosta, Commented Jan 31, 2018 at 21:58
your code works fine: plnkr.co/edit/wHbpbQkEcyvAGafHC3bN?p=preview — Zze
– Zze, Commented Jan 31, 2018 at 22:12

Vikas Kandari · Accepted Answer · 2020-07-02 17:03:38Z

7

You can use attr prefix with attributes something like below

[attr.name]="col.header"

answered Jul 2, 2020 at 17:03

Vikas Kandari

1,86224 silver badges24 bronze badges

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

Comments

Pranay Mishra · Accepted Answer · 2018-09-19 19:31:31Z

1

I would suggest using a "formControlName":

Component.html File:

<input [formControlName]="q.sFieldName" [id]="q.sFieldName" class="form-control m-input">

component.ts File:

  form: FormGroup;
  payLoad = '';

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

answered Sep 19, 2018 at 19:31

Pranay Mishra

1127 bronze badges

Comments

Mark · Accepted Answer · 2018-09-19 19:44:12Z

-4

Angular2 binding of "name" attribute in <input> elements with *ngFor

Basically name="{{col.header}}" is not correct syntax.

These are:

name="col.header"
[name]="'col.header'"
name="{{'col.header'}}"

answered Sep 19, 2018 at 19:44

Mark

1378 bronze badges

2 Comments

Vikas Kandari Over a year ago

all three are invalid if you want to set name attribute

jose.serapicos Over a year ago

use [attr.name]="col.header"

Collectives™ on Stack Overflow

Dynamically set name attribute to input field in Angular

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related