In my asp.net core web api, I developed a method that generates an object with the string provided in the URL.
I now have a search form that needs to pass this string to the URL and retrieve the objects containing it.
Here is how I utilize the api:
import { Injectable } from "@angular/core";
import { ContactDetail } from "./contact-detail.model";
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class ContactDetailService {
formData: ContactDetail;
readonly rootURL = "http://localhost:60809/api";
list: ContactDetail[];
constructor(private http: HttpClient) {}
// search contacts
searchContactDetail(keyword: string) {
return this.http
.get(this.rootURL + "/ContactDetail/Search/" + keyword)
.toPromise()
.then(res => (this.list = res as ContactDetail[]));
}
This is the search form:
<form
class="form-inline"
#form="ngForm"
autocomplete="off"
(submit)="searchContact(keyword)"
>
<input
name="keyword"
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="keyword"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
And this is how I pass the string:
searchContact(keyword: string) {
this.service.searchContactDetail(keyword);
}
Additionally, the form and the table displaying the results are in separate components.
The issue I am facing now is that when I perform a search, it sends the rootURL/search/undefined. So regardless of what I type, it always sends undefined.