如何启用和禁用搜索栏（bootstrap4）

Question

我做了一个 angular 4 项目，在 header 我添加了一个搜索栏，我想知道如何在需要时启用和禁用搜索栏。

 <form *ngIf="!authService.isAnonyme()" class="navbar-form navbar-left"  role="search">
                <div class="input-group">
                  <input  type="text" class="form-control" placeholder="Search.." [(ngModel)]="_search"  name="srch-term" id="srch-term" >
                  <div class="input-group-btn">
                    <button class="btn btn-default" (click)="Search()">
                      <i class="glyphicon glyphicon-search"></i>
                    </button>
                  </div>
                </div>
              </form>

Answer 1

您可以禁用搜索栏，如下所示。您没有提到任何代码或禁用搜索栏的条件。所以，我在这里放置了一个变量值的验证：limit。您可以根据需要更改它。

                <label class="search">
                    <i class="fa fa-search search-icon"></i>
                    <mat-form-field class="example-full-width">
                        <input matInput [(ngModel)]="searchName" [disabled]='limit' >
                    </mat-form-field>
                </label>

在TS文件中，

/* if you want to disable the field*/
    limit = true 
/* if you want to enable the field*/
    limit = false

Answer 2

你的答案是用在你想要的任何组件中

<form *ngIf="!authService.isAnonyme()" class="navbar-form navbar-left"  role="search">
            <div class="input-group">
              <input  type="text" class="form-control" placeholder="Search.." [(ngModel)]="_search" [disable]="searchSomething" name="srch-term" id="srch-term" >
              <div class="input-group-btn">
                <button class="btn btn-default" (click)="Search()">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </div>
            </div>
          </form>

在 ts

searchSomething: boolean = false;

Search() {
   this.searchSomething = !this.searchSomething;
}

如何启用和禁用搜索栏（bootstrap4）

how to enable and disable search bar(bootstrap4)

searchbar

bootstrap-4

angular