How to pick up the text of a select with formBuilder? - Angular 6

Question

I would like to take the value of the text and not the value of the select.

      <div class="form-group col-md-3">
        <label for="ProductName">Product Name</label>
        <select id="ProductName" class="form-control" formControlName='ProductName' autofocus #focusHere (change)="retrieveID()">
          <option *ngFor="let productName of productNames" [value]="productName.id">{{ productName.ProductName }}</option>
        </select>
        <small *ngIf="productForm.get('ProductName').errors?.required" class="text-danger d-block mt-2">Product Name is
          required!
        </small>
      </div>

Follows the logic.

   registerProduct() {
    this.products.push({
      ProductName: this.productForm.get('ProductName').value,
      ProductElement: this.productForm.get('ProductElement').value,
      ProductAttribute: this.productForm.get('ProductAttribute').value,
      ProductAttributeValue: this.productForm.get('ProductAttributeValue').value,
      Quantity: this.productForm.get('Quantity').value,
      FK_ID_QUOTE: this.quote.id
    })

    this.productForm.reset()
    this.focusHere.nativeElement.focus()
    return this.products
  }

I need to get the value of the text and the value of the value (id, name).

Answer 1

No ts:

objeto: any;

In html:

<select id="ProductName" class="form-control" formControlName='ProductName' autofocus #focusHere (change)="retrieveID()" [(ngModel)]="objeto">

This is pretty basic dude. Take a look at the angular course on youtube. It has several. Start there, or on tour of Angular’s official Eroes. I recommend the Loiane Groner Angular Course: here or here