javascript - 如何在 Angular 6 中将输入值传递给表单提交的函数？

Question

所以我的代码在我按回车时有效(它成功运行 performSearch 函数)，但是当我尝试通过点击我的提交按钮来运行该函数时，我得到了错误:

cannot read property error of undefined

这是我的代码:

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

我想要的只是一种获取 #searchBar 的方法' 值并将其传递到 performSearch()单击按钮时触发的功能。我怎么做？

Answer 1

您在搜索栏中使用 var searchValue 进行双向绑定(bind)所以你只需要在点击提交时改变这个变量。
只需替换您的点击事件

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