javascript - Angular2 bind ngModel from ngFor -

so i'm rendering textarea dynamically using ngfor i'm not sure how can pass ngmodel bind in function.

<div *ngfor="let inputsearch of searchboxcount; let = index" [ngclass]="{'col-sm-3': swaggerparamlength=='3', 'col-sm-9': swaggerparamlength=='1'}">    <textarea name="{{inputsearch.name}}" id="{{inputsearch.name}}" rows="3" class="search-area-txt" attr.placeholder="search product {{inputsearch.name}}"      [(ngmodel)]="inputsearch.name"></textarea>   </div> 

textarea example:

textarea render based on length of response api call in case searchboxcount searchboxcount.length, if length = 1 render 1 textarea if 3 show 3 textareas. objs have different names (example: id/email/whatever), ngmodel based on obj name json object.

how bind inputsearch.name function getquerystring()

 getquerystring() {     this.isloading = true;     let idinputvalue = inputsearch.name; //bind here      return "?id=" + idinputvalue         .split("\n") // search values separated newline , put in array collection.         .filter(function(str) {             return str !== ""         })         .join("&id="); } 

search func getquerystring() called

searchproduct() {     let querystring1 = this.getquerystring();     this._searchservice.getproduct(querystring1)         .subscribe(data => {             console.log(data);         }); } 

i know how if ngmodel not coming ngfor, there way value textarea without ngmodel? maybe that's way or if can still use ngmodel.

summary of current state

first, let me summarize data is. have list of 1 or more objects named searchboxcount. each of elements in list object has name property, could, example, call let name = this.searchboxcount[0].name; name of first object in list.

in html template use ngfor loop through of objects in searchboxcount list, , in each iteration assign object local (to ngfor) variable named inputsearch. bind input textarea created in each loop iteration name property iteration's inputsearch object.

how data

the key here inputsearch same object stored in searchboxcount @ particular index (index 0 first object, etc...). when ngmodel tied inputsearch.name bout searchboxcount[n].name. external ngfor, loop through searchboxcount list each name need.

as consequence

based on comments on original post, sounds can have 1 or more names need include in query string output. means getquerystring() work, have loop through list (or in case, let list loop us):

getquerystring() {     this.isloading = true;     let result : string = "?id=";     this.searchboxcount.foreach(         (inputsearch:any) => {  //not same variable, same objects in ngfor             result = result + inputsearch.name + "&id=";     });     result = result.slice(0, result.length - 4);  //trim off last &id=     return result; } 

edit: multiple different fields different names

from comments on post, clear each inputsearch has own key used in query string, stored in name property. need preserve name, means can't bind ngmodel it. otherwise user destroy name typing in own text , there no way correct key back. end, need store bind ngmodel other property of inputsearch object. going assume object has value property, looks this:

{     name: "id",     value: "33\n44" } 

that is, each inputsearch has name, , value have 1 or more values, separated new line. have change html template this:

<div *ngfor="let inputsearch of searchboxcount; let = index"       [ngclass]="{'col-sm-3': swaggerparamlength=='3', 'col-sm-9':       swaggerparamlength=='1'}">    <textarea name="{{inputsearch.name}}"               id="{{inputsearch.name}}" rows="3" class="search-area-txt"               attr.placeholder="search product {{inputsearch.name}}"              [(ngmodel)]="inputsearch.value"></textarea> </div> 

notice changed ngmodel inputsearch.name inputsearch?.value (the ? allows null if there no value begin with) inputsearch.value. getquerystring() method looks this:

getquerystring() {     let result:string = "?";      //for each of input search terms...     this.searchboxcount.foreach( (inputsearch:any) => {         // first reparse input values individual key value pairs         let inputvalues:string = inputsearch.value.split("\n")              .filter(function(str) { return str !== "" })              .join("&" + inputsearch.name + "=");         // add overall query string searches         result = result +               inputsearch.name +               "=" +               inputvalues +              "&"     });     // remove trailing '&'     result = result.slice(0, result.length - 1);     return result; } 

note, using rxjs easier testing vanilla javascript.

using this, if user entered 2 ids (33 , 44), single sku, , 2 emails, result ?id=33&id=24&sku=abc123&email=name@compa.ny&email=an.other@compa.ny