Bootstrap CSS 输入组无法与 Angular Material 自动完成组件一起使用

Question

我正在尝试使用 Angular Material 自动完成组件创建这样的东西：

这是制作这个的 html 代码。

  <div class="md-form input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">http://</span>
      <input type="text" class="form-control" placeholder="Username" 
      aria-describedby="basic-addon1">
      <span class = "input-group-btn">
        <button class="btn btn-primary" >Calculate</button>
      </span>
  </div>

但是有了自动完成组件，我得到了这个：

这是代码：

  <div class="input-group input-group-lg">
    
    <span class = "input-group-addon">http://</span>

    <!--<label class="center-block">Country:-->
    <md-input-container>
      <input mdInput placeholder="Type Domain Name..." [mdAutocomplete]="auto" 
      class="form-control validate filter-input " 
      formControlName="siteURLInput">
    </md-input-container>
    <md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" 
    required md-input-minlength="2" md-input-maxlength="50"
      md-select-on-match [displayWith]="displayFn">
      <!-- [displayWith]="displayFn" -->
      <md-option *ngFor="let site of sites | async" [value]="site">
        {{ site.SiteUrlShort }}
      </md-option>
    </md-autocomplete>
    <!--</label>-->
    
    <span class = "input-group-btn">
    <button (click)='LoadSiteInfo(searchForm)' class="btn btn-primary" 
    [disabled]="!searchForm.valid">Calculate</button>
    </span>
  </div>

所以这段代码有2个问题；组件长度和跨度高度。任何想法将不胜感激。

Answer 1

您正在尝试通过在其中使用 md-input-container 和 mdInput 将 bootstrap 样式与 material 结合起来。如果您保留 input div 纯 bootstrap 并仅向其中添加 md-autocomplete，那应该可以。

样本html:

<div class="md-form input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">http://</span>

      <input type="text" class="form-control" placeholder="Type Domain Name" 
      aria-describedby="basic-addon1"
      [mdAutocomplete]="auto" [formControl]="stateCtrl">

      <span class = "input-group-btn">
        <button class="btn btn-primary" >Calculate</button>
      </span>
</div>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>

demo

Bootstrap CSS 输入组无法与 Angular Material 自动完成组件一起使用

Bootstrap CSS input group not working expected with Angular Material Autocomplete component

twitter-bootstrap

angular-bootstrap

angular-material2