我需要在自动完成中进行验证
- 最小长度
- 最大长度
- 芯片总数
i Dint找到一种验证所有这些验证的正确方法我的html是
<md-chips md-on-add="selectedGroups.add($chip)" ng-focus="userTag"
ng-model="selectedGroups" is="tagSelect" md-autocomplete-snap
md-require-match="true" md-max-chips="3" maxlength="10">
<md-autocomplete
md-search-text="searchText"
md-items="item in queryGroups(searchText)"
md-item-text="item"
md-autoselect="true" md-select-on-match="true"
md-no-cache="true"
md-require-match="true"
md-input-name="autocompleteField"
md-input-minlength="2"
md-input-maxlength="5"
>
<span
md-highlight-text="searchText">{{item}}</span>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite state.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
<md-chip-template
ng-maxlength="2" md-max-chips="5" required> <span>{{$chip}}</span>
</md-chip-template> </md-chips>
我的JS是
var allGroups = ['one','two','three' ];
$scope.queryGroups = function(search) {
var firstPass = $filter('filter')($scope.allGroups, search);
return firstPass.filter(function(item) {
return $scope.selectedGroups.indexOf(item) === -1;
console.log(item)
});
};
请帮助我
-
芯片总数
对于芯片的总数,请使用MD-MAX-CHIP(这是您的最大数字 1,请说我想要5芯片,然后我在MD-CHIPS指令中使用MD-MAX-CHIPS =" 6")如果达到最大值,请禁用输入。如果要输出一些错误输出,则可以在芯片指令下方创建一个跨度,并在模型的最大长度上使用NG-IF(ng-if =" model.length> = 6)
-
输入的最低/最大长度
这是一个小技巧,因为您想使用自动完成的MD-MaxLength不存在。因此,您可以做的就是将字符串串起文本更改,以使其永远无法具有5个字符(md-search-text-change =" text_model = text_model.substring(0,5))
><md-chips name="label" ng-model="selectedGroups" md-max-chips="3" md-removable="true" md-on-add="someCheckOnAdd($chip)" md-on-remove="someCheckOnDelete($chip)"> <md-autocomplete md-search-text="text_model" ng-disabled="selectedGroups.length >= 3" md-items="item in queryGroups(text_model)" md-item-text="item" md-autoselect="true" md-search-text-change="text_model = text_model.substring(0,5)" md-select-on-match="true" md-no-cache="false" md-require-match="true"> <span md-highlight-text="searchText">{{item}}</span> </md-autocomplete> <md-chip-template > <strong style="padding-right: 10px;">{{$chip}}</strong> </md-chip-template> </md-chips> <span ng-if="model.length > 7" class="alert-message-edition-match">Max chips number reached</span>
这是一个适合您想做的工作的小提琴。