How to get text from a select with formBuilder? - Angular 6

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 take the value of the text and the value of the value (id, name).