如何在 md-autocomplete+md-chip 中进行验证

Question

我需要像

一样在自动完成中进行验证

最小长度
最大长度
筹码总数

我努力找到一种正确的方法来验证所有这些验证我的 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)
    });

};

请帮帮我

Answer 1

筹码总数

对于筹码总数，请在您的 md-chips 指令中使用 md-max-chips（这是您的最大筹码 +1，假设我想要 5 个筹码，然后我使用 md-max-chips="6"）如果达到最大值，它将禁用输入。如果您想要一些错误输出，您可以在模型的最大长度上使用 ng-if 在 chips 指令下方创建一个跨度 (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>

这是一个有效的fiddle，它符合您的要求。

如何在 md-autocomplete+md-chip 中进行验证

how to do validation in md-autocomplete+md-chip

validation

angularjs

angular-material

md-autocomplete

md-chip