(function() {
'use strict';
angular.module('peoplePickerCombo', []);
angular.module('peoplePickerCombo')
.directive('peoplePicker', function() {
return {
restrict: 'E'
,require: 'ngModel'
,scope : {
ngDisabled : '=?'
,placeholder : '@'
,secondaryPlaceholder : '@'
,users : '=ngModel'
,maxChips : '@'
,minChips : '@'
,service : '&'
,required : '@'
}
//,templateUrl : './resources/module/combo/people-picker/people-picker.template.html'
,template : '<div class="md-chip-container md-block" ng-class="{there : !users.length}" flex>\
<label ng-if="!!users.length">{{placeholder}}</label>\
<md-chips\
readonly="ngDisabled || readonly"\
aria-label="{{placeholder}}"\
class="custom-chips"\
secondary-placeholder="{{secondaryPlaceholder}}"\
md-max-chips="{{maxChips}}"\
ng-model="users"\
md-autocomplete-snap\
md-require-match="true"\
md-separator-keys="[13,186]">\
<md-autocomplete\
md-menu-class="md-contact-chips-suggestions"\
md-selected-item="selectedUser"\
md-search-text="searchText"\
md-items="item in comboCtrl.userLookupService(searchText)"\
md-item-text="comboCtrl.itemText(item)"\
md-no-cache="true"\
ng-disabled="ngDisabled || (users.length==maxChips)"\
md-floating-label="{{users.length ? (users.length==maxChips?\'\':secondaryPlaceholder) : placeholder}}"\
md-autoselect>\
<div class="md-contact-suggestion">\
<!-- <img ng-init="getPic(item)"\
ng-src="{{item.Picture}}"\
alt="{{item.DisplayName}}"\
/> -->\
<span\
class="md-contact-name"\
md-highlight-text="userSearchText"\
md-highlight-flags="ig">\
{{item.DisplayName}}\
</span>\
<span class="md-contact-email">{{item.Email}}</span>\
</div>\
</md-autocomplete>\
<md-chip-template>\
<div class="md-contact-avatar">\
<img data-ng-src="{{$chip.PictureURL}}" />\
</div>\
<div class="md-contact-name">{{$chip.DisplayName}}</div>\
</md-chip-template>\
<button md-chip-remove class="md-primary rchip">\
<!--<md-icon md-font-set="material-icons"> close </md-icon>-->x\
</button>\
</md-chips>\
</div>'
//,replace : true
,link: function(scope, element, attrs, ctrl) {
//debugger;
scope.users = scope.users || [];
//scope.userLookupService
//scope[attrs.ngModel] = scope.users;
if (angular.isDefined(attrs.ngDisabled) ) {
scope.$watch('ngDisabled', function(isDisabled) {
scope.ngDisabled = isDisabled;
});
}
/*ctrl.$validators.atleast = function(modelValue,viewValue) {
console.log(modelValue , viewValue)
return !!(modelValue && modelValue.length>0);
};
scope.$watch('users.length',function(newVal,oldVal){
ctrl.$validate();
});*/
//If provided with an array of user ids, Guess by string
if(scope.users && scope.users.length){
var s = scope.service();
angular.forEach(scope.users,function(obj,idx){
if(angular.isNumber(obj)){
s(obj).then(function(r){
scope.users[idx] = r[0];
});
}
});
}
}
,controller : ['$scope', '$timeout', '$q', function($scope, $timeout, $q){
var vm = this;
vm.itemText = function(item){
return item.DisplayName;
};
vm.userLookupService = $scope.service();
//If provided with an array of nbk ids, Guess by string
if($scope.users && $scope.users.length){
angular.forEach($scope.users,function(obj,idx){
if(angular.isString(obj)){
vm.userLookupService(obj).then(function(r){
$timeout(function(){
$scope.users[idx] = r[0];
});
});
}
});
}
}]
,controllerAs : 'comboCtrl'
};
});
angular.module('peoplePickerCombo')
.directive('required', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
if (!ctrl) {
return false;
}
ctrl.$validators.required = function(modelValue,viewValue) {
//console.log(modelValue , viewValue)
return !!( modelValue && modelValue.length>0 );
};
}
}
});
})();/* Styles go here */
/*people-picker*/
people-picker md-autocomplete md-autocomplete-wrap md-progress-linear {
bottom: -12px !important;
}
people-picker md-input-container {
bottom: 10px !important;
min-width: 400px !important;
}
people-picker md-chip {
position: relative !important;
padding: 0 20px 0 1px !important;
box-shadow: 1px 1px 1px #888;
}
people-picker .customMessages {
color: rgb(221, 44, 0);
font-size: 12px;
overflow: hidden;
-webkit-transition: all .3s cubic-bezier(.55, 0, .55, .2);
transition: all .3s cubic-bezier(.55, 0, .55, .2);
opacity: 1;
margin-top: 0;
padding-top: 5px;
}
people-picker .md-chips md-chip .md-contact-avatar {
float: left;
}
people-picker .md-chips md-chip .md-contact-avatar img {
height: 32px;
border-radius: 16px;
}
people-picker .md-chips md-chip .md-contact-name {
padding: 0 5px;
}
people-picker md-chip .md-chip-remove-container {
position: absolute !important;
right: 4px !important;
top: 4px;
margin-right: 0;
height: 24px;
}
people-picker md-chip .md-chip-remove-container button.rchip {
position: relative;
height: 24px;
width: 24px;
line-height: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
transition: background 0.15s linear;
display: block;
}
people-picker md-chip .md-chip-remove-container button.rchip md-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.7);
color: white;
fill: white;
}
people-picker md-chip .md-chip-remove-container button.rchip:hover,
people-picker md-chip ._md-chip-remove-container button.rchip:focus {
background: rgba(255, 0, 0, 0.8);
}
people-picker md-chip md-chip-template {
/*padding-right: 4px;*/
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
people-picker > .md-chip-container > label {
font-size: 14px;
color: rgba(0, 0, 0, 0.38);
/*label which is shown when user is selected | Not Secondary Placeholder*/
}
people-picker md-input-container label {
font-size: 14px;
/*placeholder and secondary placeholder*/
}
people-picker[required] .md-chip-container.there > label::after,
people-picker[required] .md-chip-container.there md-input-container label::after {
content: ' *';
font-size: 13px;
vertical-align: top;
}
/* Not using this one
people-picker .md-chip-container md-chips-wrap::before{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;
padding-left: 0px;
padding-right: 0;
z-index: 1;
-webkit-transform: translate3d(0,28px,0) scale(1);
transform: translate3d(0,28px,0) scale(1);
transition: -webkit-transform .4s cubic-bezier(.25,.8,.25,1);
transition: transform .4s cubic-bezier(.25,.8,.25,1);
max-width: 100%;
-webkit-transform-origin: left top;
transform-origin: left top;
position:absolute;
color: rgba(0,0,0,0.38);
content : attr(label);
font-size:15px;
}
people-picker .md-chip-container md-chips-wrap.md-focused::before
,people-picker .md-chip-container md-chips.ng-dirty md-chips-wrap::before
,people-picker .md-chip-container md-chips.ng-not-empty md-chips-wrap::before{
-webkit-transform: translate3d(0,-108px,0) scale(.80);
transform: translate3d(0,-108px,0) scale(.80);
transition: -webkit-transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
transition: transform cubic-bezier(.25,.8,.25,1) .4s,width cubic-bezier(.25,.8,.25,1) .4s;
}
people-picker .md-chip-container md-chips-wrap.md-focused::before{
color:rgb(63,81,181);
}
people-picker .md-chip-container md-chips-wrap.md-readonly::before{
-webkit-transform: translate3d(0,-11px,0) scale(1);
transform: translate3d(0,-11px,0) scale(1);
}*/
people-picker .md-chip-container md-chips-wrap.md-readonly {
box-shadow: none;
border-bottom: 1px dotted #CCC;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" />
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css" />
</head>
<body>
<div ng-app="app" ng-cloak>
<form novalidate name="pForm" ng-controller="MainCtrl as ctrl">
<md-content layout-padding>
<div style="background: #abcdef;">
This one doesn't throw error on empty even when required directive and $validator is programmed, Why
</div>
<div>
<people-picker required name="user" ng-disabled="false" service="ctrl.userLookupService" max-chips="10" placeholder="User" secondary-placeholder="Add Another?" ng-model="ctrl.users" aria-label="Users"></people-picker>
<div ng-messages="pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
</div>
<div> </div>
<div> </div>
<div style="background: #abcdef;">
Below one (Title) throws error on blur if empty | Error Goes away if valid | works even with keystrokes
</div>
<div>
<md-input-container class="md-block" flex>
<input type="text" placeholder="Title" aria-label="Title" required name="title" ng-model="ctrl.Title">
<div ng-messages="pForm.title.$error">
<div ng-message="required">Title is required</div>
</div>
</md-input-container>
</div>
<div>
<md-button type="submit">Submit</md-button>
</div>
</md-content>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<!--<script src="people-picker.directive.js"></script>-->
<script>
(function() {
'use strict';
angular.module('app', ['peoplePickerCombo', 'ngMaterial', 'ngMessages']);
angular.module('app')
.controller('MainCtrl', ['$scope', '$timeout', '$q',
function($scope, $timeout, $q) {
var vm = this;
vm.users = [34, 89, 55];
//Simulate a service
vm.userLookupService = function(q) {
var d = $q.defer();
//debugger;
$timeout(function() {
var list = ["Beast BoyChangeling", "Phantom Stranger", "Vril Dox", "The Shade", "Robotman", "Captain Atom", "Elongated Man", "Amanda Waller", "Green Lantern", "Adam Strange", "Deadman", "Atom", "Nightwing", "Demeain Dark", "Elijah Snow", "Sandman", "Cyborg", "Ra’s Al Ghul", "Raven", "Hitman", "Jimmy Olsen", "Dr. Mahhattan", "Midnighter", "Lobo", "Alfred Pennyworth", "Brainiac 5", "Static", "Big Barda", "Catman", "The Riddler", "Doctor Fate", "Wildcat", "Black Adam", "Two-Face", "Mister Miracle", "Green Lantern", "Plastic Man", "Firestorm", "Starfire", "Batgirl", "Red HoodRobin", "Bigby Wolf", "Poison Ivy", "SpeedyArsenalRed Arrow", "Jonah Hex", "Yorick Brown", "Spectre", "Green Lantern", "Deathstroke", "Commisioner James Gordon", "Death", "Spider Jerusalem", "The Question", "Lois Lane", "Blue Beetle", "Flash", "Deadshot", "Supergirl", "Question", "Jesse Custer", "Huntress", "Animal Man", "Donna Troy", "Sinestro", "ImpulseKid Flash", "Harley Quinn", "Batwoman", "Batgirl", "Hawkman", "Darkseid", "Starman", "Zatanna", "Blue Beetle", "Sandman", "Catwoman", "Swamp Thing", "Captain Marvel", "Green Lantern", "Martian Manhunter", "Aquaman", "Rorschach", "Black Canary", "Power Girl", "Superboy", "John Constantine", "Lex Luthor", "Robin", "Booster Gold", "Green Lantern", "Green Arrow", "Barbara Gordon", "Flash", "Tim Drake", "Wonder Woman", "Flash", "Green Lantern", "Joker", "Dick Grayson", "Superman", "Batman"];
list = list.map(function(a, i) {
return {
UserName: i,
DisplayName: a,
Email: a.replace(/[^\w]/gi, '').toLowerCase() + '@dccomics.com',
PictureURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAdVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA268pkAAAAJnRSTlMAAAICBAgMFhwmKjA4QFJUWFxeYm6Zm6urrbvBx8/X2dvf3+/9/fI9ls0AAACsSURBVCiRbdDZDoMgEAXQcau7uCsuoFX5/08stlACcp8m9yRkBgCZEq8rLsGMP7FvJt+Alom0eu8eEg5Xg4j9E2mQK8g1QAqQBqmCVIPgkv0V6Gv1EnrjjlDse4Tm6Qm9e5qYPcCr6rrqZZRuvY3xPcTjVqvTHUT4KyfBmJx8IMgRq87MyPxbuTV78cXe/oTd41A8e8YKDosNFoDM1jOWwWCHAYgdCDT0bQltPkJILs0IxHsZAAAAAElFTkSuQmCC'
}
});
var r = new RegExp(q, 'ig');
var response;
if (angular.isNumber(q)) {
response = [list[q]];
} else response = (list.filter(function(a) {
return r.test(a.DisplayName);
}).slice(0, 10));
d.resolve(response);
}, 100);
return d.promise;
};
}
]);
}());
</script>
</body>
</html>Added in Plunkr: https://plnkr.co/edit/1LgFCNqT0YDkyUAaC31C and code Snippet provided above.
There are a few issues described in the page code snippet above.
Description: The directive people-pickcer brings in users as we search in the md-autocomplete tag and when something is selected it transforms to an md-chip and gets added in the parent md-chips. When all chips are removed it should throw validation error <div ng-message="required">User is required</div>.
Usage:
<div>
<people-picker
required name="user" ng-disabled="false" service="ctrl.userLookupService"
max-chips="5" placeholder="User" secondary-placeholder="Add Another?"
ng-model="ctrl.users" aria-label="Users"></people-picker>
<div ng-messages="pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
</div>
Issue :
If you see the Title input box, whenever blurred with an invalid input throws an error. I tried writing a $validators for my module but it never fires, also when I remove any md-chip it fires all the validation (I think it tries to submit the form when removing any chip). Try removing a md-chip without touching the Title input box you will see that the validator is fired for Title, If there are more input fields with validation all gets fired if I remove any md-chip from selection.
required directive from my module
angular.module('peoplePickerCombo')
.directive('required', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
if (!ctrl) {
return false;
}
ctrl.$validators.required = function(modelValue,viewValue) {
//console.log(modelValue , viewValue)
return !!( modelValue && modelValue.length>0 );
};
}
}
});
Expected it should throw an error when all the md-chips are removed, but it never throws any error.
let's rename required directive for people picker combo to ppcRequired, othervise it will be applied to any other required input. People picker will look like
<people-picker ppc-required
name="user"
service="ctrl.userLookupService"
max-chips="10"
placeholder="User"
secondary-placeholder="Add Another?"
ng-model="ctrl.users"
aria-label="Users"></people-picker>
<div ng-messages="(pForm.$submitted || pForm.user.$touched) && pForm.user.$error" class="customMessages">
<div ng-message="required">User is required</div>
<div ng-message="resolve">One or more users have not been resolved</div>
</div>
Since required validator is not run on model change (https://github.com/angular/material/issues/8126), let's use $watch to trigger needed changes:
angular.module('peoplePickerCombo').directive('ppcRequired', function() {
return {
restrict: "A",
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
if (!ngModelCtrl) {
return false;
}
// override $isEmpty function
ngModelCtrl.$isEmpty = function (val) {
return !val || !val.length;
};
// add required validator
ngModelCtrl.$validators.required = function(modelValue) {
return !ngModelCtrl.$isEmpty(modelValue);
};
// watch for changes
scope.$watch(attrs.ngModel, function (nVal, oVal) {
if (nVal && nVal !== oVal) {
// run validations
ngModelCtrl.$$runValidators(nVal, oVal, function () {});
// update css classes
ngModelCtrl.$setTouched();
ngModelCtrl.$$updateEmptyClasses(nVal);
}
}, 1);
}
}
});
another 2 title inputs are marked as invalid by MD, but they are still untouched, so we add CSS class md-touched, which will be present only when field is touched or form submitted:
<md-input-container class="md-block"
ng-class="{'md-touched': pForm.title.$touched || pForm.$submitted}"
flex>
<input type="text"
placeholder="Title"
aria-label="Title"
required
name="title"
ng-model="ctrl.Title">
<div ng-messages="(pForm.$submitted || pForm.title.$touched) && pForm.title.$error">
<div ng-message="required">Title is required</div>
</div>
</md-input-container>
Add some CSS:
md-input-container.md-touched.md-input-invalid label.md-required::after,
md-input-container.md-touched.md-input-invalid label.md-required,
people-picker.ng-invalid-required md-input-container label,
people-picker.ng-invalid-required md-input-container.md-input-focused label {
color: rgb(221, 44, 0);
}
md-input-container.md-input-invalid label.md-required::after,
md-input-container.md-input-focused label.md-required::after,
md-input-container.md-input-has-value label.md-required::after,
md-input-container.md-input-invalid label.md-required {
color: rgba(0, 0, 0, 0.54);
}
md-input-container.md-touched.md-input-invalid .md-input {
border-color: rgb(221, 44, 0);
}
md-input-container.md-input-invalid .md-input {
border-color: rgba(0, 0, 0, 0.12);
}
people-picker.ng-invalid-required md-chips .md-chips {
box-shadow: 0 1px rgb(221, 44, 0);
}
people-picker + .customMessages [ng-message] {
font-size: 12px;
line-height: 14px;
margin-top: 0;
opacity: 1;
overflow: hidden;
padding-top: 5px;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2) 0s;
color: rgb(221, 44, 0);
}
[ppc-required] md-input-container label::after {
content: " *";
font-size: 13px;
vertical-align: top;
}
plunker: https://plnkr.co/edit/43HOJRJ6WsAqnbvHONVl?p=preview