Angular 2：input置于form标签内时Search管道失效问题求助

这个问题的核心是Angular表单模块对ngModel的特殊处理导致双向绑定异常，进而让Search管道无法获取到最新的搜索值。下面给出两个简单可行的解决办法：

方案1：给Input添加name属性 #

当在<form>内使用[(ngModel)]时，Angular要求表单控件必须有name属性才能正确注册并维护双向绑定。修改你的代码如下：

<form autocomplete="off">
  <input 
    [(ngModel)]="query" 
    name="query" <!-- 新增这一行 -->
    type="search" 
    class="form-control search-control" 
    placeholder="Search for orders (by order number)"
  >
</form>

添加name属性后，Angular会正确识别这个表单控件，query变量的双向绑定就能正常工作，Search管道也能实时接收到搜索文本进行过滤。

方案2：给Form添加ngNoForm指令 #

如果你不需要把这个搜索框作为表单的一部分（只是用<form>来解决自动填充问题），可以给<form>标签加上ngNoForm指令，禁用Angular的表单自动处理逻辑：

<form autocomplete="off" ngNoForm> <!-- 新增ngNoForm -->
  <input 
    [(ngModel)]="query" 
    type="search" 
    class="form-control search-control" 
    placeholder="Search for orders (by order number)"
  >
</form>

这样Angular会把这个<form>当作普通的HTML表单处理，不会干扰ngModel的双向绑定，搜索功能就能恢复正常。

为什么会出现这个问题？ #

Angular的FormsModule会自动监听页面上的<form>标签，对内部带有[(ngModel)]的<input>进行表单控件注册。如果没有提供name属性，Angular无法完成控件注册，会导致ngModel的双向绑定失效——你的query变量不会随着输入内容更新，自然Search管道拿不到最新值，也就无法过滤数据了。

内容的提问来源于stack exchange，提问作者Aashiq Rathnadas