как включить и отключить панель поиска (bootstrap4) - PullRequest
Новая
       12

как включить и отключить панель поиска (bootstrap4)

0 голосов
/ 03 мая 2018

Я сделал угловой проект 4 и в шапке я добавил панель поиска, я хочу знать, как включать и отключать панель поиска, когда это необходимо. 

 <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>

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

ваш ответ - использовать любой компонент, который вы хотите 

<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>

в тс 

searchSomething: boolean = false;

Search() {
   this.searchSomething = !this.searchSomething;
}
0 голосов
/ 03 мая 2018

Вы можете отключить панель поиска, как показано ниже. Вы не упомянули ни кода, ни условия отключения панели поиска. Итак, я поставил валидацию значения переменной: 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
...