CODEWITHSUNDEEP
angular
Dale K
Dale K

Reputation: 27448

Reactive Form not updating with Third Party Address Lookup

I have a reactive address form (Address Line 1, Address Line 2, Town, County, Postcode, Country) which works as expected. While developing I view the current values of the form with {{ myForm.value | json }}.

I have now added a third party address lookup control which fires a callback function when an address is selected. Within this callback function I update the form control objects with the values returned from the address finder e.g.

callback(address:any):void {
    this.line1.setValue(returnedAddress.Line1, { emitEvent: true });
}

Where line1 is a reference to a FormControl created and added to the FormGroup.

When this callback is called the HTML input control IS updated with the new Address Line 1, but the overall form value ISN'T updated.

If I then give the HTML input control focus, and then tab off, the form values update.

If I call the same update code (with a static test address) via a button onclick function everything works as expected i.e. both the HTML input and the Form value updates.

I am assuming that because the update is out of the regular angular thread that it is missing the change but I can't work out how to notify angular of this change - the change detection stuff I have tried seems to be relating to updating the view not the form values.

Upvotes: 0

Views: 265

Answers (1)

Dale K
Dale K

Reputation: 27448

I couldn't give up... so I tried the following expecting this to update:

this.ngZone.run(() => {
    this.changeRef.markForCheck();
});

But then randomly tried just putting the update inside the angular zone and bingo:

this.ngZone.run(() => {
    this.line1.setValue(returnedAddress.Line1, { emitEvent: true });
});

The key being the Angular zone which I hadn't come across until now.

Upvotes: 1

Related Questions