Как получить доступ к $error из вложенных форм

У меня есть одна основная форма и другая subForm. Как я могу получить доступ к $error дочерней форме, но без прямой ссылки на имя subForm?

Я хочу иметь возможность отображать это name is required (например) вместо того, чтобы просто знать имя формы.

Вот демо моей проблемы: http://plnkr.co/edit/QWZArI1UFPpJdjoK8eVn?p=preview

2 ответа

Хорошо, я не был на 100% уверен, что понял ваш вопрос, но я думаю, что да, так что вот удар на него:

Существует несколько способов доступа к ошибкам дочерней формы, но для всех, похоже, требуется имя ngForm.

Предполагая эту структуру:

<form name="parentForm">
 
</form>

вы знаете, что вы можете получить к нему доступ через $scope.childForm.$error, но менее известно, что он также привязан к родительской форме. Вы можете получить к нему доступ с помощью $scope.parentForm.childForm.$error, но, очевидно, это не хорошо, поскольку вам все еще нужно имя.

Вы можете получить хакеры и перебрать свойства в родительской форме и попытаться определить, какая из них является дочерней формой, и оттуда.

Наконец, как мы обсуждали в Twitter/GitHub, у меня есть директива о том, что для вас какая-то магия. У него действительно была ошибка, которая неправильно обрабатывала встроенные формы, но я исправил ее. Ознакомьтесь с новой версией моей директивы, которая пытается упростить обработку ошибок с помощью Angular:

https://github.com/CWSpear/angular-form-errors-directive

Я добавил возможность отображать все ошибки всего дочернего ngForms с флагом в v1.3.0.


Я думаю, что для этого конкретного случая использования мой простой метод getErrors в области видимости является более надежным решением, чем директива formErrors, предложенная в принятом ответе. Посмотрите это сравнение двух решений. Директива formErrors очищает ошибки от дочерних форм, если заполняется нижняя дочерняя форма. Играйте с записью данных, и вы быстро увидите другие ошибки.

Решение getErrors не очень красивое, но оно очень простое, и можно легко понять, как его можно улучшить для обеспечения более четких сообщений.

JavaScript:

var app = angular.module('app', ['FormErrors']);
app.controller('MainCtrl', ['$scope', function ($scope) {
 $scope.people = [{name: ''}, {name: ''}];
 $scope.allErrors = [];
 $scope.getErrors = getErrors;
 function getErrors(formObject){
 $scope.allErrors = [];
 extractErrors(formObject)
 }
 function extractErrors(formObject, parent) {
 for (var e in formObject.$error) {
 var path = parent ? parent + "." + e + "." + formObject.$name : formObject.$name + "." + e;
 var err = formObject.$error[e];
 if (err instanceof Array){ // this is an array of sub-forms
 err.forEach(function (subForm, i) {
 extractErrors(subForm, path + "[" + i + "]");
 });
 } else {
 if (err === true) {
 path = path.replace(new RegExp("." + e, "g"), "");
 $scope.allErrors.push(path + ": " + e);
 }
 }
 }
 }
}]);

licensed under cc by-sa 3.0 with attribution.