0

I'm getting below JSON from api

{  
   "status":"true",
   "select":[  
      {  
         "Type":"MARKET_WORKING",
         "Question":"WHICH BRAND COUNTER IS IT?",
         "option1":"USPA",
         "option2":"HANES",
         "option3":"USPA & HANES ",
         "option4":""
      }
   ],
   "text":[  
      {  
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE STOCK QTY AVAILABLE OF INNERWEARS?",
         "option1":"INNERWEARS TOP ",
         "option2":"INNERWEARS BOTTOM ",
         "option3":"",
         "option4":""
      },
      {  
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE STOCK QTY AVAILABLE OF COMFORTWEAR?",
         "option1":"COMFORT WEAR TOP",
         "option2":"COMFORT WEAR BOTTOM",
         "option3":"",
         "option4":""
      }
   ]
}

Where in text part I'm getting two questions where each have two answer with option1 and option2 which will write in input field. How can I get this value of dynamically created inputs?. I tried with adding class to each input and trying to get value of these inputs by .val() using jQuery. But the value is getting blank. Not getting how to do this with angular 4

below is my ts code.

  submitkey()
  {
      this.brandSelect = this.selectedOption;
      this.stock_qty_innerwears_top = $('.INNERWEARS.TOP').val();
      console.log(this.stock_qty_innerwears_top);
      this.stock_qty_innerwears_bottom = $('.INNERWEARS.BOTTOM').val();
      this.comfort_wear_top = $('.COMFORT.WEAR.TOP').val();
      this.comfort_wear_bottom = $('.COMFORT.WEAR.BOTTOM').val();


       let params={
                    eid:this.user.id,
                    brand:this.brandSelect,
                    type_col:'MARKET_WORKING',
                    STOCK_QTY_INNERWEARS_TOP:this.stock_qty_innerwears_top,
                    STOCK_QTY_INNERWEARS_BOTTOM:this.stock_qty_innerwears_bottom,
                    COMFORT_WEAR_TOP:this.comfort_wear_top,
                    COMFORT_WEAR_BOTTOM:this.comfort_wear_bottom,

                    }   
      this.apiService.add_mwork(params).subscribe((res)=>{
                    // console.log(res);
    })
  }

and below is .html code

  <div class="field-group" *ngFor="let mworkq of textq">
    <div class="label-cust">
          {{mworkq.Question}}
          <ion-input class="{{mworkq.option1}}" type="text" placeholder="{{mworkq.option1}}" ></ion-input>
          <ion-input class="{{mworkq.option2}}" type="text" placeholder="{{mworkq.option2}}" ></ion-input>            
    </div>

  </div>
Sagar Kodte
  • 3,723
  • 4
  • 23
  • 52
  • Have you tried this? https://stackoverflow.com/questions/51079111/angular-5-how-to-call-a-function-when-html-element-is-created-with-ngfor/51079312#51079312 This will help you to know one of the ways by which we can manage dynamic html elements using angular life cycle hooks. I hope it helps you. – Abhishek Sharma Jul 10 '18 at 10:52
  • M calling this on submit button which is in html file – Sagar Kodte Jul 10 '18 at 10:54

0 Answers0