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

标签 javascript angular

所以我的代码在我按回车时有效(它成功运行 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()单击按钮时触发的功能。我怎么做?

最佳答案

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

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

关于javascript - 如何在 Angular 6 中将输入值传递给表单提交的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50806610/

相关文章:

javascript - 无法读取未定义的属性 'search' - Youtube API

javascript - 火狐操作系统 TCPSocket API : SSL received a record that exceeded the maximum permissible length

javascript - jsRender ,带空格的 json 列名

angular - karma 报应中的 lcov.info 文件, Angular 未生成

node.js - 使用 Node 的 fs 会导致空对象

Angular 2 给出 "TypeError: emitter.subscribe is not a function"

javascript - Javascript 中的无偏随机范围生成器

javascript - 强制 window.navigator.pointerEnabled 为 false

javascript - 在 Angular 2 中使用服务

angular - 使用 *ngFor 来显示有关对象的错误的数组