0

I want to send data from an input field to component in order to retrieve subsequent data, if i bind the data to the value attribute it works as i want but i am unable to submit the form as the value bound value is not whats needed at the back end. this is my code sample

component.ts

fetchProductTypeForCategory(event) {
  let category = event.srcElement.attributes.value || event.currentTarget.value;
  this.productTypeSrv.fetchProductTypesParam(category)
    .subscribe(res => {
      this.productTypes = res;
    }, err => {
      console.log(err);
    })
}

component.html

<select class="form-control" [formControl]="subCategoryForm.controls['l1category']" (change)="fetchProductTypeForCategory($event)">
  <option *ngFor="let item of categorys" [value]="item.id">{{item.name}}</option>
  <!-- <option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option> -->  // need this in order to submit the form
</select>

how can i bind the item.id to a different input attribute and use it in my (change)="fetchProductTypeForCategory($event)" call?

CE0
  • 191
  • 3
  • 7
  • 18
  • Sorry, but I don't get your point. Clicking an option-field, in your case, will deliver the item id as value inside your method. Can you please be more precise, what your problem is? –  May 24 '18 at 18:39
  • `Clicking an option-field, in your case, will deliver the item id as value inside your method`. Yes that is correct but when i submit the form, the id is submitted as the value which is not what i want. So i want to be able to pass the id inside the method through a different means other than value, then use the appropriate value `slug` to submit the form. @DiabolicWords – CE0 May 24 '18 at 18:59
  • You can bind to the value slug using [ngValue] see, [Binding select element to object in angular](https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular) – Vinorth May 24 '18 at 19:30

0 Answers0