Nisanth Nisanth - 3 months ago 68
AngularJS Question

angular material - Select header Error


I get this error "Error: md-input-container can only have one
child input, textarea or select element!" when trying to
implement a Select Header.


This is my code

<md-input-container>
<label>Vegetables</label>
<md-select ng-model="selectedVegetables" md-on-close="clearSearchTerm()" data-md-container-class="selectdemoSelectHeader" multiple="">
<md-select-header class="demo-select-header">
<input ng-model="searchTerm" type="search" placeholder="Search for a vegetable.." class="demo-header-searchbox _md-text">
</md-select-header>
<md-optgroup label="vegetables">
<md-option ng-value="vegetable" ng-repeat="vegetable in vegetables |
filter:searchTerm">{{vegetable}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>


When i remove the following then i dont get any errors.

<md-select-header class="demo-select-header">
<input ng-model="searchTerm" type="search" placeholder="Search for a vegetable.." class="demo-header-searchbox _md-text">
</md-select-header>


Does anyone know what I'm doing wrong or have experienced the same thing?

Answer

Update the material verison from 1.1.0-rc3 to the latest version 1.1.0-rc.5, it should work,

Here is the working Plunker.,