角材料接触芯片验证 ng-minlength/maxlength/必需答案

【问题标题】：Angular Material Contact Chips validation ng-minlength/maxlength/required角材料接触芯片验证 ng-minlength/maxlength/必需
【发布时间】：2018-02-10 07:47:20
【问题描述】：

我一直在尝试在<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>

【问题讨论】：

标签： angularjs validation angular-material

【解决方案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
}

【讨论】：

【解决方案2】：

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

您可以使用chips length 属性来获取数组中的chips 数量。有了这个，您可以在错误消息上使用ng-show 来执行必要的验证检查。

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

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

【讨论】：

api 链接说验证回调在待办事项列表中。这是否意味着前进的唯一方法是使用 md-on-add 和 $scope var 来跟踪？最大芯片似乎也不适用于 md-contact-chips
是的，我正在使用 ng-disabled 请编辑您的答案@clint
您能否在 jsfiddle 中进行编辑，因为我使用的是 ng-disabled。如果您有任何答案，请帮助我

【解决方案3】：

这就是我如何使用 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>

【讨论】：

【解决方案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;
}

【讨论】：