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

Question

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?

Answer 1

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

Answer 2

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