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

Question

I need to do validation in autocomplete like

min length
max length
total number of chip

I dint find a correct way to validate all these validations my HTML is

<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>

my js is

   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)
    });

};

please help me

Guillaume Roche-Bayard · Accepted Answer · 2017-11-22T13:50:18.100

1

total number of chip

For the total number of chips, use md-max-chips (it's your max number +1 let's say i want 5 chips then i use md-max-chips="6") in your md-chips directive it will disable the input if max is reached. If you want some error output you can create a span below your chips directive with ng-if on the max length of your model (ng-if="model.length >= 6)

Min / Max length of the input

This is a little trick since you want to use an autocomplete the md-maxlength doesn't exist. So what you can do is just substring the string on text change so that it can never have more than 5 characters (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>

Here is a working fiddle which fits what you wanted to do.

edited Nov 22 '17 at 13:50

answered Nov 21 '17 at 16:42

Guillaume Roche-Bayard

377
5
17

I am implementing ng-chip with md-autocomplete from the example which I am using descent have input field in it and i don't know how to implement it in my existing system. I got this from an example [link](https://jsfiddle.net/paulcheriyan/pup5y839/) – Paul Cheriyan Nov 22 '17 at 05:09
Did it solve your problem @PaulCheriyan ? Or you need some more ? – Guillaume Roche-Bayard Nov 22 '17 at 09:17
Sorry @guillaume , I need some more explanation to implementing validation in ng-chip with md-autocomplete – Paul Cheriyan Nov 22 '17 at 09:48
What do you need to implement and what is not working ? Is the JS link you gave me your current code ? If so I'll fix it there once you tell me what you need exactly :) – Guillaume Roche-Bayard Nov 22 '17 at 09:53
here is the jsfidle link which i have added the above solution [Solution-in-jsfidle](https://jsfiddle.net/paulcheriyan/pup5y839/2/). But validation is not working. can show me why it is not working – Paul Cheriyan Nov 22 '17 at 10:03
What do you mean "validation" ? – Guillaume Roche-Bayard Nov 22 '17 at 10:28
what I meant by validation means maximum number of chip and maximum length of a chip – Paul Cheriyan Nov 22 '17 at 11:01
Just edit both your fiddle and my answer. There you go. – Guillaume Roche-Bayard Nov 22 '17 at 13:50
Thanks a lot for helping me – Paul Cheriyan Nov 23 '17 at 05:07
when i updated the library of material design to a higher version I have getting some problem https://stackoverflow.com/questions/47629832/md-autocomplete-not-selecting-unmatched-values – Paul Cheriyan Dec 06 '17 at 11:36

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

1 Answers1