Проверьте форму с некоторыми полями внутри директив в angularjs - PullRequest
Новая
       47

Проверьте форму с некоторыми полями внутри директив в angularjs

0 голосов
/ 18 марта 2020

У меня есть форма, организованная во вкладках. Когда я нажимаю следующую кнопку, поля каждой вкладки должны быть проверены. Моя проблема в том, что не все поля находятся на одном уровне, некоторые из них являются внутренними директивами, и я не знаю, как адаптировать проверку.

Вот мой код (уменьшенный) 

<ba-wizard-step title="Products" form="vm.allData">
    <div class="row">
       <div class="form-group col-sm-6"
            ng-class="{'has-error': editForm.cod.$invalid && !editForm.cod.$pristine}"
            title="CUPS">
           <label for="cod" class="control-label required">COD</label>
           <input type="text" class="form-control pull-right" name="cod"
                  ng-model="product.productData.cod" required />
           <div class="error"
                ng-show="editForm.cod.$invalid && !editForm.cod.$pristine">
             {{fotofacturaEditForm.gasFareCups.$valid ? '' : 'Write valid COD'}}
           </div>
        </div>
    </div>
    <brands ng-model="product" data-brand-type="gas"
            brand-type="product.brandData.brandType">
    </brands>
</ba-wizard-step>

Проверьте правильность в моей «следующей» кнопке 

$scope.checkErrorsGasDataTab = function(editForm, tabName) {
   $scope.invalidTabElements = getInvalidTabElements(tabName);
   if(!editForm.gasFareCups.$valid){
      $scope.createErrorMessage(editForm.gasFareCups, 'CUPS', 'has-error');
   }
   if($scope.invalidTabElements.length > 0) {
      return false;
   }
   else {
      return true;
   }
}

$scope.createErrorMessage = function(control, fieldName, type) {
            type = type || 'field';
            if((typeof control !== 'undefined') && control){
                if(fieldName !== null) {
                    addInvalidField(fieldName);
                }
                var t = '[name="'  + control.$name + '"]';
                jQuery(t).parent().addClass('ng-invalid');

                control.$pristine = false;
                control.$invalid = true;
            }
        };

И в моей директиве html: 

<div class="form-group col-sm-3">
    <div ng-class="{'has-error': brandType.$invalid && !brandType.$pristine}" title="Brands">
        <label for="brandType" class="control-label required">Brand</label>
            <select class="form-control pull-right custom-select"
                    name="brandType"
                    ng-model="brandType"
                    ng-change="onChangeBrands()"
                    placeholder-text-single="'Brand is required'"
                    required >
                <option value="">----Seleccione una tarifa----</option>
                <option ng-repeat='(key,value) in availableBrands'
                        value="{{key}}" ng-selected="(key === brandType)">
                  {{key}}
                </option>
            </select>
    </div>
    <div class="error"
         ng-show="brandType.$invalid && !brandType.$pristine" >
      Select brand
    </div>
</div>

В моей директиве. js

(function () {
  angular.module('myapp.backoffice.pages.products').directive('brands', function ($compile) {
    return {
      scope: {
        request: '=ngModel',
        brandType: '=brandType',
        required: '=ngRequired',
        brandDesc: '@brandDesc',
        editForm: '=fotofacturaEditForm',
      },
      templateUrl: 'app/pages/products/directives/brands.html',
      replace: true,
      controller: function ($scope, $rootScope, $http, $q, $stateParams, apiBaseUrl, SomeService) {
      // how can i validate principal form here????
      link: function ($scope, elem, attr, ctrl) {}
    };
  });
})();
...