How to get the input value of search box and enter it in AngularJs component with Enter key

Question

I need to get the search list using speciesName from the table and I tried to get the data while pressing enter key, but, it is giving me that input data is not work (undefined).

How can I pass the search value to the type script method in the same input?

The type script component is 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
}));

}

and the html for the component is like this:

 <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>

After I put the search criteria and input the Enter key it giving me not found because the value of speciesName is undefined.

How can I get speciesName value after I input it and click enter key and insert it to the search method?

Ganesh C · Accepted Answer · 2021-01-06 13:14:28Z

1

You need to add [(ngModel)] attribute for databinding to work. Don't need to pass argument for the function.

Update the html code as below:

<form class="form-inline" id="searchForm">
            <div class="form-group">
                <input class="form-control mr-sm-2" type="search" placeholder="Enter 
                    id="speciesNameSearch" name="speciesNameSearch" 
                    (keyup.enter)="getSearchResult()" [(ngModel)]="speciesName"  >
            </div>
        </form>

The component function code:

//define speciesname for component
speciesName: string = "";

getSearchResult() {


this.speciesService.getSearchResult(this.speciesName).subscribe(result => {
  this.speciesList = result.results;
}, error => this.toastr.error(error.statusText, '', {
  timeOut: 3000
}));

answered Jan 6, 2021 at 13:14

Ganesh C

2331 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gokul Budha · Accepted Answer · 2021-01-06 13:14:19Z

You are trying to pass the value from the form field by using name attribute. You can use [(ngModel)] or can pass the $event as the function argument and get the value in the component as event.target.value

Html Looks something like this :

 <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($event)">
        </div>
    </form>

and in the component file change as :

getSearchResult(speciesName) {
this.speciesName = speciesName.target.value;
console.log("species name : ", this.speciesName);

}

Collectives™ on Stack Overflow

How to get the input value of search box and enter it in AngularJs component with Enter key

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related