2017-11-17 145 views
0

我正在爲角度自動補全組件添加驗證錯誤消息。我遵循我在How to add validation attributes to md-autocomplete angular material directive中找到的示例,但我不想使用浮動標籤。我怎樣才能做到這一點?這裏是我的HTML:角度自動補全錯誤消息(無浮動標籤)

<md-autocomplete md-input-id="person" 
 
       md-input-name="person" 
 
       md-item-text="item.displayName" 
 
       md-items="item in getPeople(searchText)" 
 
       md-search-text="searchText" 
 
       md-selected-item="model.person" 
 
       md-selected-item-change="form.person.$setValidity('itemInList', !!item)" 
 
       md-min-length="0" 
 
       placeholder="Enter a person" 
 
       md-select-on-focus 
 
       class="output" 
 
       required> 
 
    <md-item-template> 
 
     <span class="md-item" md-highlight-text="searchText" md-highlight-flags="^i">{{item.displayName}}</span> 
 
    </md-item-template> 
 
    <md-not-found> 
 
     <span class="md-item">No matches found.</span> 
 
    </md-not-found> 
 
</md-autocomplete> 
 
<div ng-messages="form.allowWrite.$error" ng-if="form.allowWrite.$touched" class="help-block"> 
 
    <div ng-message="required">Person is required</div> 
 
    <div ng-message="itemInList">Person was not selected from the list</div> 
 
</div>

回答

1

我發現,加入 「MD-無浮動」 屬性固定我的問題。下面是一個更新的摘要:

<md-autocomplete md-input-id="person" 
 
        md-input-name="person" 
 
        md-item-text="item.displayName" 
 
        md-items="item in getPeople(searchText)" 
 
        md-search-text="searchText" 
 
        md-selected-item="model.person" 
 
        md-selected-item-change="form.person.$setValidity('itemInList', !!item)" 
 
        md-min-length="0" 
 
        placeholder="Enter a person" 
 
        md-select-on-focus 
 
        class="output" 
 
\t \t \t \t \t md-no-float 
 
        required>