在多个控制器中的 select 指令上公开自定义$errors

Expose custom $errors on select directive inside multiple controllers

本文关键字：自定义 errors 指令 select 控制器      更新时间：2023-09-26

我有一个自定义选择指令pets-select，用于多个视图和控制器。但是我不知道如何传入可选的required属性并相应地验证外部形式。

如何检查正在使用的指令是否required设置为true，并在用户未选择它时显示错误消息？

普伦克尔https://plnkr.co/edit/gDGWq32kxDnAv6ZYyke4?p=preview

例如，在一个表单名称为 myForm 的控制器/视图中使用的指令： 

  <!-- Main controller view -->
  <div ng-controller="MainCtrl as mainCtrl">
      <form name="myForm" ng-submit="mainCtrl.submit(myForm.$valid)" novalidate>
        <div class="form-group">
          <input ng-model="mainCtrl.data.name" type="text" name="name" placeholder="Name" required="required">
          <div class="error" ng-show="myForm.name.$invalid">Please enter a name.</div>
        </div>
        <div class="form-group">
          <input ng-model="mainCtrl.data.phone" type="tel" name="phone" placeholder="Phone number" required="required">
          <div class="error" ng-show="myForm.phone.$invalid">Please enter a phone number.</div>
        </div>
        <!-- Custom select directive (how do I validate?) -->
        <div class="form-group">
          <pets-select ng-model="mainCtrl.data.pets" name="pets" label="Select pet" on-pet-change="mainCtrl.setPet(pet)" required="true"></pets-select>
        </div>
        <div class="form-group">
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>

另一个表单名称为 anotherForm 的控制器/视图：

    <!-- Another controller and view -->
    <div ng-controller="AnotherCtrl as anotherCtrl">
      <form name="anotherForm" ng-submit="anotherCtrl.submit(anotherForm.$valid)" novalidate>
        <div class="form-group">
          <input ng-model="anotherCtrl.data.email" type="email" name="email" placeholder="Email" required="required">
          <div class="error" ng-show="anotherForm.email.$invalid">Please enter an email.</div>
        </div>
        <div class="form-group">
          <input ng-model="anotherCtrl.data.address" type="text" name="address" placeholder="Address" required="required">
          <div class="error" ng-show="anotherForm.address.$invalid">Please enter an address.</div>
        </div>
        <!-- Custom select directive (how can i validate this?) -->
        <div class="form-group">
          <pets-select ng-model="anotherCtrl.data.pets" name="pets" label="Select pet" on-pet-change="anotherCtrl.setPet(pet)" required="false"></pets-select>
        </div>
        <div class="form-group">
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>

指令定义：

app.directive('petsSelect', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    templateUrl: 'pets-select.html',
    scope: {
      pet: '=ngModel',
      label: '@',
      onPetChange: '&',
      name: '@',
      required: '='
    },
    link: function(scope, element, attrs) {
      scope.pets = ['Cats', 'Dogs', 'Birds'];
    }
  };
});

指令模板：

<div class="select">
    <select ng-model="selectedPet" name="{{name}}" ng-change="onPetChange({pet: selectedPet})" class="form-control">
      <option value="" disabled="disabled">{{label}}</option>
      <option ng-repeat="pet in pets" value="{{pet}}">{{pet}}</option>
    </select>
    <!-- How do I check whether the directive in use is required and show this error message if a user doesn't select it?? -->
    <div ng-show="???">Please select a pet.</div>
  </div>

我认为您应该更喜欢ngMessages，您可以在其中添加字段级别的错误消息。如果字段为 required，您可以配置自定义消息。您可以编写自定义指令进行验证并用于验证输入

文档消息

演示示例-文档

附言目前，我无法处理您的 plunker，但上述资源将解决问题。

相关文章：