angularjs - Angular Material 接触芯片验证 ng-minlength/maxlength/required

Question

我一直试图在 <md-contact-chips> 上触发验证错误对于 ng-minlength/maxlength/required 但未能有效实现。

有没有一种直接的方法可以自己实现？ -- 似乎出于某种原因，Angular Material 中的接触芯片指令不支持这些验证。

在此处查看代码笔:
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> 

在 Controller 内部，您可以定义 customvalidation 函数并根据需要添加额外的条件。

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