CODEWITHSUNDEEP
angulartypescriptdata-binding
Bruno
Bruno

Reputation: 442

Get 'keys' and 'input text' from *ngfor to .ts file

i have to create a string with the keys that are dynamically created by *ngfor, and input text by the user.

i find it hard to explain, heres some code and what i need

<th *ngFor="let column of Filter" >
    <tr>{{ column.name }}: <input type="{{column.type}}" id="{{ column.key }}" name="{{ column.key }}" autocomplete="off"  > &nbsp;</tr>
</th>
<button class="btn btn-success" type="submit" (click)="fFilter(string)">Search</button>

i want that the string is: " column.key1='input1', column.key2='input2' .. " and so on until there's no columns..

I was trying to find a solution, but nones helps me.. How can i do this? Sorry for not being able to explain it the best way.

Upvotes: 0

Views: 1151

Answers (2)

Bruno
Bruno

Reputation: 442

My code looks like this, the funtion called on html just maps the columns created on .ts side.. i think im missing something between html and .ts that passes the values that i want (column.key - input value)

html:

<th *ngFor="let column of entityList.metadata.advancedFilter" >
     <tr>{{ entityName.toLowerCase() + '.' + column.key | translate}}: <input type="{{column.type}}" id="{{ column.key }}" name="{{ column.key }}" autocomplete="off"  [(ngModel)]="column.value" >  </tr>
</th>
<div class="col-sm-9">
     <button class="btn btn-success" type="submit" (click)="advancedFilter()">Search</button>
</div>

.ts

...
import { Column} from '../../models/entity-list.model';
...
export class EntityListComponent implements OnInit {

    column: Column;
    Filter: Column[]=[new Column("code","text","Column1",""),
        new Column("title","text","Column2",""),
        new Column("description","text","Column3",""),
        new Column("entryDate","date","Column4",""),
        new Column("endSubmissionDate","date","Column4","")];

....

    advancedFilter(){
        var requiredValue="where ";
        this.Filter.map(
            x=>requiredValue+=(x.key+"="+"'"+x.value+"'"+" AND ")
        );
        requiredValue = requiredValue.slice(0, -5);
        alert(requiredValue+";");
    }

entity-list.model.ts

...
export class Column{
    public key:string;
    public type:string;
    public name:string;
    public value:string;
    constructor(key:string,type:string,name:string,value:string)
    {
        this.key=key;
        this.type=type;
        this.name=name;
        this.value=value;
    }
}

My output: enter image description here

Upvotes: 1

Riddhi
Riddhi

Reputation: 209

I have tried to understand your requirement and created the solution.

As per my understanding, you have user controls(shown in the image below) generated using code mentioned here:

    <th *ngFor="let column of Filter" >
      <tr>{{ column.name }}: 
      <input type="{{column.type}}" id="{{ column.key }}" 
             name="{{ column.key }}" autocomplete="off" 
            [(ngModel)]="column.value" > &nbsp;</tr>
    </th>
    <hr>
    <button class="btn btn-success" type="submit" (click)="fFilter()">Search</button>

User controls generated from above code data input After entering data in all textboxes, when the user clicks on the search you want to output or data as shown in alert in below image inside the function call. On click of search alert shown

I have added [(ngModel)]="column.value" for two way binding of each textbox data. We can get those data inside .ts file.

Column.model.ts:

export class Column{
   public key:string;
   public type:string;
   public name:string;
   public value:string;
    constructor(key:string,type:string,name:string,value:string)
    {
        this.key=key;
        this.type=type;
        this.name=name;
        this.value=value;
    }
}

component.ts file:

import { Component, OnInit } from '@angular/core';
import { Column } from './Column';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  column: Column;
  Filter: Column[]=[new Column("1","ABC","Column1",""),
  new Column("2","ABC","Column2",""),
  new Column("3","ABC","Column3",""),
  new Column("4","ABC","Column4","")];
  constructor() { 
 // this.Filter=new Column(id="",type="",name="")
  }

  ngOnInit() {
  }
  fFilter(){
    var requiredValue="";
    this.Filter.map(
      x=>requiredValue+=(x.key+"="+x.value+",")
    );
    alert(requiredValue);
  }
}

Basically, I have changed the way of passing an argument from HTML file to typescript file, but get the same data in fFilter() function which you can use as per your requirement.

Upvotes: 2

Related Questions