javascript - How do you pass input value into a function on form submit in Angular 6? - Stack Overflow

admin管理员组

文章数量:1191922

So my code works when I hit enter (it runs the performSearch function successfully), but when I try to run the function by hitting my submit button I get the error:

cannot read property error of undefined

Here's my code:

<mat-form-field (ngSubmit)='performSearch($event)' color='primary' id='search-input' class='full-width' appearance='outline'>
    <mat-label color='red'>Search</mat-label>
    <input #searchBar matInput  [(ngModel)]='searchValue' name='searchBar' [value]='searchValue' (keyup.enter)='performSearch($event)'>
 </mat-form-field>

 <button mat-raised-button color="primary" (click)='performSearch(searchBar.value)' id='submit-search' type='submit' for='searchBar'>Submit</button>

All I want is a way to grab the #searchBar' value and pass it into the performSearch() function that fires when I click the button. How do I do that?

So my code works when I hit enter (it runs the performSearch function successfully), but when I try to run the function by hitting my submit button I get the error:

cannot read property error of undefined

Here's my code:

<mat-form-field (ngSubmit)='performSearch($event)' color='primary' id='search-input' class='full-width' appearance='outline'>
    <mat-label color='red'>Search</mat-label>
    <input #searchBar matInput  [(ngModel)]='searchValue' name='searchBar' [value]='searchValue' (keyup.enter)='performSearch($event)'>
 </mat-form-field>

 <button mat-raised-button color="primary" (click)='performSearch(searchBar.value)' id='submit-search' type='submit' for='searchBar'>Submit</button>

All I want is a way to grab the #searchBar' value and pass it into the performSearch() function that fires when I click the button. How do I do that?

• javascript
• angular

Share Improve this question Follow edited Jun 12, 2018 at 4:25 Abel Valdez 2,40811 gold badge1818 silver badges3333 bronze badges asked Jun 11, 2018 at 21:58 yoursweateryoursweater 2,04133 gold badges2323 silver badges4343 bronze badges 1

• Your input contains modal named searchValue you should pass the same when clicking the submit button. – Just code Commented Jun 12, 2018 at 4:34

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

You are doing two way binding in the search bar with var searchValue so you need to change only pass this var on click of submit. Just replace your click event

(click)='performSearch(searchBar.value)' to
(click)='performSearch(searchValue)'

If you are working with a piece that needs to pass it's own value into a method, this will do the trick:

<input type="number" value="{{myValue}}" (change)="updateMyValue($event.target.value)">

This is because you are sending the event object on form submit, so you'll get the complete Event object.

(ngSubmit)='performSearch($event)'

If you just want one value, use your template reference variable of input as you are using in click event,

(ngSubmit)='performSearch(searchBar.value)'

 (click)="performSearch(searchValue)"

It will work, because you've model in searchbar input, it will send that value through click function!

本文标签： javascriptHow do you pass input value into a function on form submit in Angular 6Stack Overflow