ブートストラップCSSの入力グループIは、角マテリアルオートコンプリートコンポーネントで、このようなものを作成しようとしています角度マテリアルオートコンプリートコンポーネント

Question

と期待に動作していない：

そして、これは、これを行うための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を内部に使用してブートストラップスタイルをマテリアルと組み合わせようとしています。 input div純粋なブートストラップをそのまま残して、それに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