3 

(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>&nbsp;</div>
        <div>&nbsp;</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>

Plunkr に追加: https://plnkr.co/edit/1LgFCNqT0YDkyUAaC31Cおよび上記のコード スニペット。

上記のページ コード スニペットで説明されている問題がいくつかあります。

説明:このディレクティブpeople-pickcerは、タグで検索するとユーザーをmd-autocomplete取り込み、何かが選択されると md-chip に変換され、親に追加されmd-chipsます。すべてのチップが取り除かれると、検証エラーがスローされます<div ng-message="required">User is required</div>。

使用法：

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

問題 : [タイトル] 入力ボックスが表示されている場合、無効な入力でぼやけているとエラーがスローされます。モジュール用に書いてみました$validatorsが、起動しません。また、md-chipを削除すると、すべての検証が起動します（チップを削除するとフォームを送信しようとすると思います）。タイトル入力ボックスに触れずに md-chip を削除してみてください。バリデーターがタイトルに対して起動されることがわかります。検証のある入力フィールドがさらにある場合、選択から md-chip を削除するとすべてが起動されます。

required私のモジュールからのディレクティブ

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

すべての md チップが削除されたときにエラーがスローされるはずですが、エラーがスローされることはありません。

4

2 に答える 2

1

これは、配列を変更するディレクティブが原因であり、value(array) は変更されません。

たとえば、次の $watch をディレクティブに追加できます。

scope.$watch(function(){
 return ctrl.$modelValue && ctrl.$modelValue.length;  
}, function(){
 ctrl.$validate();
});
于 2016-10-09T11:51:31.327 に答える
1

  1. ピープル ピッカー コンボの必須ディレクティブの名前をppcRequiredに変更しましょう。そうしないと、他の必須入力に適用されます。ピープルピッカーは次のようになります

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

  2. 必要なバリデーターはモデルの変更 ( https://github.com/angular/material/issues/8126 ) では実行されないため、 $watchを使用して必要な変更をトリガーしましょう。

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

  3. 別の 2 つのタイトル入力はMDによって無効としてマークされていますが、それらはまだ変更されていないため、CSS クラス md-touched を追加します。これは、フィールドがタッチされた場合またはフォームが送信された場合にのみ表示されます。

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

  4. 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;
}

プランカー: https://plnkr.co/edit/43HOJRJ6WsAqnbvHONVl?p=preview

于 2016-10-09T21:35:57.460 に答える