2017-11-17 67 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>