Angular表单双向绑定失效：搜索表单无法获取输入值问题

你的问题出在模板驱动表单中使用[(ngModel)]时，没有给输入框添加name属性。Angular的模板驱动表单要求所有绑定了ngModel的表单控件必须具备name属性，否则框架无法识别该控件，也就无法将输入值同步到组件的searchString变量中，导致控制台打印为空。

修改后的HTML代码： #

<div class="searchbar-container"> 
  <div class="row"> 
    <div class="col-12"> 
      <form class="form mb-3" (ngSubmit)="onSearchSubmit(searchForm)" #searchForm="ngForm"> 
        <div class="input-group"> 
          <input class="form-control" type="search" placeholder="Search" aria-label="Search" 
                 [(ngModel)]="searchString" name="searchString"> <!-- 添加name属性 -->
          <button class="btn btn-outline-dark" type="submit" [disabled]="!searchForm.valid">Search</button> 
        </div> 
      </form> 
    </div> 
  </div> 
</div>

补充说明： #

添加name属性后，Angular就能正确追踪这个输入框的值变化，点击提交时this.searchString就能获取到输入的内容。你也可以通过提交的form参数直接获取表单值，比如console.log(form.value.searchString)，结果是一致的。

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