AngularJS: список всех ошибок формы

Фон: В настоящее время я работаю над приложением с вкладками; и я хотел бы перечислить поля/разделы, которые не проверяют, чтобы направить пользователя на поиск ошибок на правой вкладке.

Поэтому я попытался использовать form.$error для этого; но я не полностью его работаю.

Если ошибки проверки происходят внутри a ng-repeat, например:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>

Пустое значение приводит к form.$error, содержащему следующее:

{ "required": [
  {
    "inumber": {}
  },
  {
    "inumber": {}
  }
] }

С другой стороны, если ошибки проверки не встречаются вне этого ng-repeat:

<input ng-model="name" name="iname" required="true" />

Объект form.$error содержит следующее:

{ "required": [ {} ] }

я ожидал бы следующего:

{ "required": [ {'iname': {} } ] }

Любые идеи о том, почему имя элемента отсутствует?

Запуск plunkr можно найти здесь: http://plnkr.co/x6wQMp

Ответы

Ответ 1

Как @c0bra указал в комментариях, что объект form.$error заселен, ему просто не нравится выгружаться как JSON.

Завершение прохождения через form.$errors, и вложенные объекты получат желаемый результат.

<ul>
  <li ng-repeat="(key, errors) in form.$error track by $index"> <strong>{{ key }}</strong> errors
    <ul>
      <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
    </ul>
  </li>
</ul>

Все, что нужно сделать, c0bra.

Другой вариант - использовать одно из решений этого вопроса для назначения уникальных имен динамически созданным входам.

Ответ 2

Я сделал функцию, в которую вы передаете форму. Если есть ошибки формы, они будут отображаться на консоли. Он показывает объекты, чтобы вы могли взглянуть. Я поместил это в свою функцию сохранения.

function formErrors(form){
  var errors = [];
  for(var key in form.$error){
    errors.push(key + "=" + form.$error);
  }
  if(errors.length > 0){
    console.log("Form Has Errors");
    console.log(form.$error);
  }
};

Ответ 3

Ответ Бретта DeWoody правильный. Однако я хотел сделать логику в своем контроллере. Поэтому я написал следующее, основанное на ответе user5045936. Это может также помочь некоторым из вас, кто хочет пройти маршрут контроллера. Кстати, я использую директиву тостера, чтобы показывать сообщения о проверке моих пользователей.

 if (!vm.myForm.$valid) {
            var errors = [];

            for (var key in vm.myForm.$error) {
                for (var index = 0; index < vm.myForm.$error[key].length; index++) {
                    errors.push(vm.myForm.$error[key][index].$name + ' is required.');
                }
            }

            toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);

            return;
        }

Ответ 4

Если у вас есть вложенные формы, вы найдете это полезным:

 function touchErrorFields(form) {
    angular.forEach(form.$error, function (field) {
      angular.forEach(field, function(errorField) {
        if (!errorField.hasOwnProperty('$setTouched')) {
          touchErrorFields(errorField);
        } else {
          errorField.$setTouched();
        }
      })
    });
  }