I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome:
this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value;
this.data.affiliateLinkUrl = this.bookLinkForm.get('affiliateLinkUrl').value;
The second line, however, leads to a peculiar situation where a MatDialogRef object suddenly becomes undefined when the code is used right before calling a method on the MatDialogRef reference. Below is the relevant code snippet for context:
if(status.success){
this.notificationService.notify('success','Success', status.info);
this.data.title = this.bookLinkForm.controls['title'].value;
this.data.content = this.bookLinkForm.controls['content'].value;
this.data.affiliateLinkUrl = this.bookLinkForm.get('affiliateLinkUrl').value;
this.dialogRef.close(this.data);
}
When 'get' is used to retrieve affiliateLinkUrl, the dialogRef inexplicably becomes undefined, whereas using the 'controls' method does not cause any issues. There are no evident errors in the code other than this unexpected behavior. The dialogRef object has been properly initialized in the constructor.
If anyone can shed light on what might be causing this discrepancy and explain the differences between the methods controls and get, I would greatly appreciate it.