Angular reactive form returning same value many times

Question

i'm doing a console.log in order to print a needed value.. i'm doing exactly this way

console.log(this.orderForm.get('addressId')?.value);

it's expected to be printed a single value, but that's not my case.. it has being printing the value so many times.. I need this value to search an address in an array, just like

this.addresses.find(x => x.id == this.orderForm.get('addressId')?.value);

but as I'm receiving it so many times, the find()/filter() method is breaking..

I guess it's something related to subscribe/unsubscribe, but haven't find anything about this on web..

ps: this method is in my html code just like <span> getAddress() </span>

Answer 1

Because this function

<span>getAddress()</span>

you are in HTML, so it will update regularly according to the form.

You can update as follows:

<span (click)="getAddress()"> Click here! </span>

Answer 2

Try below like

this.addresses.find(x => x.id === (this.orderForm.get('addressId')?.value));

instead of

this.addresses.find(x => x.id == this.orderForm.get('addressId')?.value);

Hope it should be work!