Question

所以我的代码在我按下Enter键时运行（它成功运行performSearch函数），但是当我尝试通过按下提交按钮来运行该函数时，我收到错误：

无法读取未定义的属性错误

这是我的代码：

<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在搜索栏中进行双向绑定，因此您只需更改，只需点击提交即可传递此var。只需替换您的点击事件

即可

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

Answer 2

这是因为您要在表单提交上发送事件对象，因此您将获得完整的Event对象。

(ngSubmit)='performSearch($event)'

如果您只想要一个值，请在点击事件

中使用输入的模板参考变量

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

Answer 3

 (click)="performSearch(searchValue)"

它会起作用，因为你在搜索栏输入中建模，它会通过点击功能发送该值！

Answer 4

如果您正在处理需要将其自身值传递给方法的部分，这将达到目的：

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

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

4 个答案: