Question

我一直试图在<md-contact-chips>上针对ng-minlength / maxlength / required触发验证错误，但是还没有能够有效地实现这一点。

有没有直接的方法来实现这个？ - 出于某种原因，Angular Material中的contact chips指令似乎不支持这些验证。

请参阅此处的codepen： 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>

Answer 1

您无法直接使用此属性。你必须使用自定义验证。

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

Answer 2

目前，您需要编写自己的验证。目前，md-chips仅支持md-max-chips验证。其他形式的验证目前正在审批中。 md-chips api

您可以使用筹码length属性来获取阵列中的筹码数量。这样，您可以在错误消息上使用ng-show来执行必要的验证检查。

例如：ng-show="myForm.contacts.length == 0"

此外，您可以使用md-on-add或md-on-remove编写自己的验证。

Answer 3

这就是我如何使用md-chips和md-contact-chips来处理所需的验证

我没有完全测试代码，但我写了这封信给你一个想法。我希望它可以帮到你！

＆＃13;

angular.module('MyApp', ['ngMaterial'])
.controller("ContactChipDemoCtrl", ['$scope', function ContactChipDemoCtrl($scope) {
  $scope.formRequiredError = {};

  $scope.sendButton = function(form) {
    $scope.formRequiredError = {
      "required": $scope.contacts.length <= 0;
    };
  };
}]);

＆＃13;

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

＆＃13;

Answer 4

简单的解决方法：

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

角度材料接触芯片验证ng-minlength / maxlength / required

4 个答案: