Пользовательские помощники руля в AngularJS

Question

У меня обширная форма для веб-приложения, и я заметил, что много информации о вводе и проверке повторяется. Есть ли способ сократить это и зарегистрировать вспомогательный метод руля? Например, я предпочел бы рубить этот код немного:

<span class="form-control-error" ng-show="personalForm.first_name.$invalid && !personalForm.first_name.$pristine || submitted && personalForm.first_name.$invalid"> 
    <span ng-show="personalForm.first_name.$error.required">First Name is required</span> 
</span> 

Answer 1

Там есть угловая директива, которая идеально подходит для этого: ngMessages - https://docs.angularjs.org/api/ngMessages

Это было бы эквивалентно текущий код:

<span class="form-control-error" ng-show="shouldShowFormErrors(personalForm.first_name)" ng-messages="personalForm.first_name.$errors"> 
    <span ng-message="required">First Name is required</span> 
</span> 

Добавить функцию к контроллеру, как это:

$scope.shouldShowFormErrors = function(formElement){ 
    return $scope.submitted || formElement.$pristine; 
}; 

Чтобы сократить еще большую разметку, вы можете использовать шаблон с ngMessages, но если вы не можете использовать общие сообщения об ошибках (то, что в вашем примере относится к этому полю), это не подходит.

Если вы действительно хотите сократить свой код, вы можете создать директиву, которая создает теги span ngMessages с персонализированным сообщением. Зависит от того, как далеко вы хотите его принять.

Я также рекомендую использовать свойство $ touched, а не свойство $ pristine. Я предпочитаю его поведение для таких ситуаций.