I'm facing an issue where I am trying to fetch the search list using speciesName from a table. However, when I attempt to retrieve the data by pressing the enter key, it is returning an error stating that the input data is undefined.
Is there a way to pass the search value to the TypeScript method within the same input field?
The TypeScript component code looks like this:
getSearchResult(speciesName) {
this.speciesName = speciesName;
this.speciesService.getSearchResult(speciesName).subscribe(result => {
this.speciesList = result.results;
}, error => this.toastr.error(error.statusText, '', {
timeOut: 3000
}));
}
The HTML for the component is as follows:
<form class="form-inline" id="searchForm">
<div class="form-group">
<input class="form-control mr-sm-2" type="search" placeholder="Enter Species Name ..."
id="speciesNameSearch" name="speciesNameSearch" aria-label="Search"
(keyup.enter)="getSearchResult(speciesNameSearch)">
</div>
</form>
When I enter the search criteria and press Enter, it shows "not found" because the speciesName value is undefined.
How can I extract the speciesName value after entering it and clicking Enter to then insert it into the search method?