调用函数后关闭下拉菜单

Question

我遇到了下拉菜单的问题。当我展开下拉菜单时，一切都按预期工作。但是，有可能禁用第一个搜索按钮并禁用 txtSearch 输入字段吗？ （我的意思是班级"glyphicon glyphicon-search black-icon"）？

另外，在评论中，在 onSubmit 函数之后，我可以通过form.reset() 重置所有表单字段；有没有可能在表单上重置一个窗口？我在想txtSearchCities表单控件。

调用 onSubmit2 函数后自动关闭下拉菜单也有问题。

使用的技术：anugar 2，bootstrap 3。

<form (ngSubmit)="onSubmit(formtag)" #formtag="ngForm" ngNativeValidate>
    <div class="row">
        <div class="input-group" id="adv-search">
          <input type="text" class="form-control" placeholder="Search" id="txtSearch" ngModel name="txtSearch"/>
          <div class="input-group-btn">
            <div class="btn-group" role="group">
              <div class="dropdown dropdown-lg">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                <div class="dropdown-menu dropdown-menu-right" role="menu">
                  <form class="form-horizontal" role="form" (ngSubmit)="onSubmit2(formtag2)" #formtag2="ngForm" ngNativeValidate>
                    <div class="form-group">
                      <label for="filter">Cities:</label>
                      <select class="form-control" id="txtSearchCities" ngModel name="txtSearchCities">
                                        <option value="" selected disabled hidden>All</option>
                                        <option value="example1">1</option>
                                        <option value="example2">2</option>
                                        <option value="example3">3</option>                         
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="contain">Search</label>
                      <input type="text" class="form-control" placeholder="Search" id="txtSearchPattern" ngModel name="txtSearchPattern" minlength="3"/>
                    </div>  
                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                  </form>
                </div>
              </div>
              <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search black-icon" aria-hidden="true"></span></button>
            </div>
          </div>
        </div>
    </div>
  </form>

来自组件的功能：

    onSubmit(form: NgForm) {
    this.exampleService.getCities(form.value.txtSearch)
      .subscribe(
          data => {console.log(data)},
          error => console.error(error),
      );

  }

     onSubmit2(form: NgForm) {
    this.exampleService.getCities(form.value.txtSearchPattern+form.value.txtSearchCities)
      .subscribe(
          data => {console.log(data)},
          error => console.error(error),
      );

  }

Answer 1

您可以将下拉对象发送到您的onSubmit() 方法，然后您可以从下拉对象中删除open 类以关闭它。 Sou 你的 html 看起来像：

<form (ngSubmit)="onSubmit(formtag,dropdownDiv)" #formtag="ngForm" ngNativeValidate>
    <div class="row">
        <div class="input-group" id="adv-search">
          <input [disabled]="dropdownDiv.classList.contains('open')" type="text" class="form-control" placeholder="Search" id="txtSearch" ngModel name="txtSearch"/>
          <div class="input-group-btn">
            <div class="btn-group" role="group">
              <div #dropdownDiv class="dropdown dropdown-lg">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                <div class="dropdown-menu dropdown-menu-right" role="menu">
                  <form class="form-horizontal" role="form" (ngSubmit)="onSubmit2(formtag2)" #formtag2="ngForm" ngNativeValidate>
                    <div class="form-group">
                      <label for="filter">Cities:</label>
                      <select class="form-control" id="txtSearchCities" ngModel name="txtSearchCities">
                                        <option value="" selected disabled hidden>All</option>
                                        <option value="example1">1</option>
                                        <option value="example2">2</option>
                                        <option value="example3">3</option>                         
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="contain">Search</label>
                      <input type="text" class="form-control" placeholder="Search" id="txtSearchPattern" ngModel name="txtSearchPattern" minlength="3"/>
                    </div>  
                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                  </form>
                </div>
              </div>
              <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search black-icon" aria-hidden="true"></span></button>
            </div>
          </div>
        </div>
    </div>
  </form>

那么您的onSubmit() 将如下所示：

onSubmit(form: NgForm,dd:any) {
    if(dd.classList.contains('open'))
      dd.classList.remove('open');
    this.exampleService.getCities(form.value.txtSearch)
      .subscribe(
          data => {console.log(data)},
          error => console.error(error),
      );
}