Cypress can’t get selected value of an Angular select

Solution for Cypress can’t get selected value of an Angular select
is Given Below:

I’m converting from Protractor to Cypress and I have hit a case where I can cy.get(...).select() the appropriate option, but verifying it fails.

Its 'have.text' value (after visually changing) ends up being a long string of all the options.

These are my page object functions:

getOwnerField() {
   return cy.get('select[name="owner"]')
}

setOwnerField(val: string) {
   return this.getOwnerField().select(val).should('have.text', val)
}

The Angular8 produced HTML is:

<select _ngcontent-epq-c4="" class="select form-control ng-valid ng-dirty ng-touched" formcontrolname="owner_id" name="owner" ng-reflect-klass="select form-control" ng-reflect-ng-class="[object Object]" ng-reflect-name="owner_id">
   <option _ngcontent-epq-c4="" value="" ng-reflect-value="">---------</option>
   <!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
      }-->
   <option _ngcontent-epq-c4="" value="1" ng-reflect-value="1">e2e</option>
   <option _ngcontent-epq-c4="" value="2" ng-reflect-value="2">e2e_team_member00</option>
   <option _ngcontent-epq-c4="" value="3" ng-reflect-value="3">e2e_team_member01</option>
   <option _ngcontent-epq-c4="" value="4" ng-reflect-value="4">e2e_team_member02</option>
   <option _ngcontent-epq-c4="" value="5" ng-reflect-value="5">e2e_team_member03</option>
   <option _ngcontent-epq-c4="" value="6" ng-reflect-value="6">other00</option>
   <option _ngcontent-epq-c4="" value="7" ng-reflect-value="7">other01</option>
   <option _ngcontent-epq-c4="" value="8" ng-reflect-value="8">other02</option>
   <option _ngcontent-epq-c4="" value="9" ng-reflect-value="9">other03</option>
</select>

When watching the chrome debugger while selecting, I don’t see any changes to the HTML.

How do I verify the selected option?

You have to find() the selected option:

setOwnerField(val: string) {
    this.getOwnerField().select(val).find('option:selected').should('have.text', val)
}