Question

我有一个自定义选择指令pets-select，用于多个视图和控制器。但我无法弄清楚如何传递可选的required属性并相应地验证外部表单。

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

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

Answer 1

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

Docs-ngMessages

Demo example-docs

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

在多个控制器

1 个答案: