我正在尝试构建一个使用角度材质的页面,并使用md-chips
和md-autocomplete
等元素。
我想对此md-chips
进行验证,以便在没有筹码且点击提交按钮时会显示错误消息,类似于md-input-container
。
对于md-input-container
我的代码如下
<md-input-container class="md-block" flex-gt-sm>
<label>Title</label>
<input md-maxlength="100" maxlength="100" required type="text" name="bookTitle" ng-model="bookCtrl.book.name">
<div ng-messages="bookForm.bookTitle.$error" role="alert">
<div ng-message-exp="['required', 'maxlength']">
Book title is required and it should not exceed 100 characters.
</div>
</div>
</md-input-container>
如果不符合验证,则会出现警告。如何执行与md-chips
md-autocomplete
类似的具有以下代码
<md-chips name="bookAuthors" ng-model="bookCtrl.book.authors" md-autocomplete-snap
md-separator-keys="bookCtrl.keys"
md-transform-chip="bookCtrl.transformChip($chip)"
md-require-match="bookCtrl.authorAutocompleteRequireMatch">
<md-autocomplete
md-selected-item="bookCtrl.selectedAuthor"
md-search-text="bookCtrl.searchAuthor"
md-items="author in bookCtrl.querySearch(bookCtrl.searchAuthor, bookCtrl.bookAuthors)"
md-item-text="author.name"
placeholder="Author">
<span md-highlight-text="bookCtrl.searchAuthor">{{author.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>{{$chip.name}}</span>
</md-chip-template>
</md-chips>
可以添加到md-chips
以执行验证?
答案 0 :(得分:0)
在md-chips块之外创建div块并添加红色。它将类似地工作
<div ng-messages="{test:true}" ng-show="true">
<div ng-message="test" style="color: rgb(221,44,0); font-size:12px">errroro123</div>
</div>