Угловая проверка всех полей на отправке

Question

У меня есть следующая директива, которую я написал, которая проверит правильность поля при изменении a) значения поля или b) элемент поля был размытым.

Во-первых, вот пример того, как директива может быть использована:

<form name="myForm"> 
    <input type="text" name="favoriteColor" validate-for="myForm"> 
</form> 

Причина я должен указать myForm потому, что я иногда вложенные формы. Так что в этом случае она будет идти, как это:

<form name="myForm"> 
    <input type="text" name="favoriteColor" validate-for="myForm"> 
    <ng-form name="innerForm"> 
    <input type="text" name="favoriteNumber" validate-for="innerForm"> 
    </ng-form> 
</form> 

Во всяком случае, это то, что мой код выглядит следующим образом (ES6):

'use strict'; 

class ValidateFor { 
    constructor() { 
    this.restrict = 'A'; 
    this.require = 'ngModel'; 

    this.link = ($scope, $element, $attrs, ngModel) => { 
     var form = $scope[$attrs.validateFor]; 
     var field = form[$element.attr('name')]; 

     $scope.$watch(() => ngModel.$modelValue,() => { 
     if (field.$touched) { 
      this.checkForErrors(field, $element); 
     } 
     }); 

     $element.bind('blur',() => { 
     this.checkForErrors(field, $element); 
     }); 
    }; 
    } 

    checkForErrors(field, $element) { 
    if (field.$invalid) { 
     $element.addClass('error'); 
    } else { 
     $element.removeClass('error'); 
    } 
    } 
} 

ValidateFor.$inject = []; 

export default ValidateFor; 

Единственное моя директива не сделать, это добавить error класс на поле, когда форма была отправлена.

Как добавить класс ошибки ко всем моим полям при отправке формы?

Меня не волнует, означает ли решение изменение моей директивы или добавление кода в другое место.

Answer 1

Это, как я приближаюсь такую ​​функциональность:

Я сделал директиву, чтобы использовать его на кнопку отправки формы. Ключевой функцией является установка состояния $dirty во всех полях, когда пользователь хочет отправить форму, что позволяет мне показывать все ошибки, которые обычно скрываются. Затем, если форма действительна, она выполняет функцию обратного вызова.

.directive('mySubmitIfValid', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      form: '=myForm', 
      submit: '&mySubmitIfValid' 
     }, 
     link: function (scope, element) { 

      element.on('click', function() { 
       markFieldsAsDirty(); 
       submitFormIfValid(); 
      }); 

      function markFieldsAsDirty() { 
       Object.keys(scope.form).filter(function (key) { 
        return key[0] !== '$'; 
       }).forEach(function (fieldName) { 
        scope.form[fieldName].$setDirty(); 
       }); 
      } 

      function submitFormIfValid() { 
       if (scope.form.$valid) { 
        scope.submit(); 
       } 
      } 

     } 
    }; 
}); 

А потом в HTML:

<form name="myForm"> 
    <input type="text" name="favoriteColor" ng-minlength="2"> 
    <input type="submit" value="Save" 
    my-submit-if-valid="submitFunction()" my-form="myForm"> 
</form> 

Answer 2

Я в конечном итоге просто $broadcast ING в form-submitted событие, когда форма была отправлена. Кажется, хорошо работает. Вот мой код.

'use strict'; 

class ValidateFor { 
    constructor() { 
    this.restrict = 'A'; 
    this.require = 'ngModel'; 

    this.link = ($scope, $element, $attrs, ngModel) => { 
     var form = $scope[$attrs.validateFor]; 
     var field = form[$element.attr('name')]; 

     $scope.$on('form-submitted',() => { 
     this.checkForErrors(field, $element); 
     }); 

     $scope.$watch(() => ngModel.$modelValue,() => { 
     if (field.$touched) { 
      this.checkForErrors(field, $element); 
     } 
     }); 

     $element.bind('blur',() => { 
     this.checkForErrors(field, $element); 
     }); 
    }; 
    } 

    checkForErrors(field, $element) { 
    if (field.$invalid) { 
     $element.addClass('error'); 
    } else { 
     $element.removeClass('error'); 
    } 
    } 
} 

ValidateFor.$inject = []; 

export default ValidateFor;