Geek Answers Handbook

Angular Material Contact Checking Contacts ng-minlength / maxlength / required

I tried to cause a validation error on <md-contact-chips>for ng-minlength / maxlength / required, but could not efficiently implement this.

Is there a direct way to implement this myself? - for some reason, the contact chip directive in Angular Material does not support these checks.

See the code here: http://codepen.io/anon/pen/YqdRNw

<form name='myForm'>
<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoContactChips" ng-app="MyApp">
  <md-content class="md-padding autocomplete" layout="column">
    <md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i" filter-selected="ctrl.filterSelected" placeholder="To" >
    </md-contact-chips>
    <p ng-show="myForm.contacts.$error.required" class="text-danger">You did not enter a contact</p>
    <p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
    <p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
  </md-content>
</div>
</form>
+4
source share
4 answers

You cannot use this attribute directly. You must use a special check for it.

<md-contact-chips ng-model="ctrl.contacts" md-transform-chip="customvalidation($chip)"> </md-contact-chips>
    <p ng-show="ctrl.contacts.length == 0 && ctrl.contacts.$touched"> Required </p>
    <p ng-show="ctrl.contacts.length < 3 && ctrl.contacts.$touched"> Minimum 2 Contacts are required </p>
    <p ng-show="ctrl.contacts.length > 5 && ctrl.contacts.$touched"> Maximum 5 Contacts can be added </p>

, .

function customvalidation(chip){
 if(satisifedCondition(chip)){
    return null //It will add chip
 } else { return undefined } // It will not add chip
}
+3

. md-chips md-max-chips. . md-chips api

chips length, . ng-show .

: ng-show="myForm.contacts.length == 0"

, md-on-add md-on-remove, .

+2

md-chips md-contact-chips

, , . , !

angular.module('MyApp', ['ngMaterial'])
.controller("ContactChipDemoCtrl", ['$scope', function ContactChipDemoCtrl($scope) {
  $scope.formRequiredError = {};

  $scope.sendButton = function(form) {
    $scope.formRequiredError = {
      "required": $scope.contacts.length <= 0;
    };
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>

<html lang="en" ng-app="MyApp">

<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
</head>

<body layout="column" ng-controller="ContactChipDemoCtrl as ctrl">
  <form name='myForm'>
    <div layout="column" ng-cloak="" class="chipsdemoContactChips">
      <md-content class="md-padding autocomplete" layout="column">
        <md-contact-chips ng-model="ctrl.contacts" ng-minlength='1' ng-required='true' ng-maxlenght='3' name='contacts' md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" md-require-match="true" md-highlight-flags="i"
        filter-selected="ctrl.filterSelected" placeholder="To">
        </md-contact-chips>
        <p ng-show="myForm.contacts.$error.minlength" class="text-danger">Your contact list is too short</p>
        <p ng-show="myForm.contacts.$error.maxlength" class="text-danger">Your contact list is too long</p>
      </md-content>
    </div>
    <div class="custom-error" ng-if="ctrl.contacts.length <= 0">
      <div ng-messages="formRequiredError">
        <div ng-message="required" translate='form_user_empty'></div>
      </div>
    </div>
  </form>

</body>

</html>
Hide result
0

:

<md-contact-chips   
  ng-class="{'myError': object.fieldName !== undefined && object.fieldName.length == 0}"    
  ng-model="object.fieldName"   
  otherStuff></md-contact-chips>

CSS

.myError input::placeholder { 
    color: rgb(221,44,0) !important;
}
0
source

More articles:


All Articles