驗證嵌套在另一個指令中的自定義選擇指令

Question

我有2個指令： my-custom-form和my-custom-select 。 如何在嵌套在my-custom-form指令中的my-custom-select指令上觸發自定義驗證？

柱塞 http://plnkr.co/edit/PJIL8T2Fj1i4Fw4dyPjR?p=preview

my-custom-form指令的用法：

<div ng-controller="MyExampleCtrl as exampleCtrl">
  <my-custom-form form-name="exampleForm" form-submit="exampleCtrl.submit()"></my-custom-form> 
</div>

我的自定義格式指令

angular.module('myApp')
  .directive('myCustomForm', [function() {

    var link = function(scope, element, attrs, ctrls) {
      var formCtrl = ctrls[0];
      var thisDirectiveCtrl = ctrls[1];

      scope.submitMyForm = function() {
         if (formCtrl.$valid) {
           //submit form
           thisDirectiveCtrl.submit();
         }
      };

      // Show some inline validation
      scope.hasError = function(field) {
        var isInvalidandSubmitted = scope.submitted && formCtrl[field].$invalid;
        var isInvalidandDirty = formCtrl[field].$invalid && formCtrl[field].$touched && !formCtrl[field].$pristine;

        return isInvalidandSubmitted || isInvalidandDirty; 
      };
    };

    var controller = function($scope, $element, $attrs) {
      var vm = this;

      // this is the form model
      vm.data = {};

      // this executes the submit function from the parent controller (MyExampleCtrl)
      vm.submit = function() {
       vm.formSubmit();
      };
    };

    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      templateUrl: 'templates/my-custom-form-template.html',
      scope: {
        formName: '@',
        formSubmit: '&'
      },
      require: ['form', 'myCustomForm'],
      link: link,
      controller: controller,
      controllerAs: 'myCustomFormCtrl',
      bindToController: true
    };
  }]);

在my-custom-form-template.html中

<form name="{{formName}}" novalidate>
  <div class="form-group" ng-class="{ 'is-invalid': hasError('firstName')}">
    <input type="text" ng-model="myCustomFormCtrl.data.firstName" name="firstName" required />
    <p ng-show="hasError('firstName')">Enter a first name.</p>
  </div>

  <div class="form-group">
    <!-- Nested directive here -->
    <div class="form-group">
      <my-custom-select ng-model="myCustomFormCtrl.data.country" name="country" required></my-custom-select>
    </div>

  </div>
  <button type="button" ng-click="submitMyForm()">Submit</button>
</form>

custom-select指令

angular.module('myApp')
  .directive('myCustomSelect', ['DataService', function(DataService) {

    return {
      restrict: 'E',
      replace: true,
      require: '^?myCustomForm',
      templateUrl: 'templates/my-custom-select-template.html',
      scope: {
        name: '@',
        ngModel: '=',
        required: '='
      },
      link: function(scope, el, attrs, parentCtrl) {
        scope.countries = [];

        // Set required attribute
        if (scope.required) {
          el.find('select').attr('required', true);
        }

        // call out to external service and populate select
        DataService.get().then(function(res) {
          scope.countries = res;
        });

        // How can I trigger validation?
      }
    };

  }]);

在自定義選擇模板中：

<div class="select">
  <select ng-model="ngModel" name="{{name}}" ng-change="updateSelect()">
    <option value="" disabled>Select option</option>
    <option ng-repeat="country in countries" value="{{country.code">{{country.name}}</option>
  </select>

  <!-- how can I do something like this ? -->
  <div ng-if="required">
     <p ng-show="hasError('country')">Please select a</p>
  </div>
</div>

Answer 1

在這種情況下，您可以使用ngForm指令

它實例化一個FormController，並允許您訪問每個輸入或選擇子元素。

Answer 2

ng-form解決了在調用子指令時驗證嵌套指令的問題，請使用ng-form屬性，其屬性名稱與創建子表格時給定的名稱相同。

兒童指令表

 <form name="bankAccountForm">
   ....html.....
 </form>

家長指示表

<form name="customerContractingEntityForm" ng-submit="saveCustomer()" novalidate>

  ............ parent HTML........

    <div ng-form="bankAccountForm">    //// this live validates the child directive
        <div ws-bank-account></div>    //// calling child direcive here
    </div>                
</form>