Как проверить поля динамической формы в директиве angular?

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

это html:

<body ng-controller="MainCtrl">
  <h1>form</h1>
  <form name="form">
      <div ng-repeat="conf in config">
          <div field data="data" conf="conf"></div>
      </div>
  </form>
  <pre>{{data|json}}</pre>
</body>

Контроллер и полевая директива:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.data = {name: '', age: ''}
    $scope.config = [
        {field: 'name', required:true},
        {field: 'age'}
    ];
});

app.directive('field', function ($compile) {
    return {
        scope: {
            data: '=',
            conf: '='
        },
        link: function linkFn(scope, element, attrs) {
            // field container
            var row = angular.element('<div></div>');

            // label
            row.append(scope.conf.field + ': ');

            // field input
            var field = angular.element('<input type="text" />');
            field.attr('name', scope.conf.field);
            field.attr('ng-model', 'data.' + scope.conf.field);
            if (scope.conf.required) {
                field.attr('required', 'required');
            }
            row.append(field);

            // validation
            if (scope.conf.required) {
                var required = angular.element('<span>required</span>');
                required.attr('ng-show', 
                    'form.' + scope.conf.field + '.$error.required');
                row.append(required);
            }

            $compile(row)(scope);
            element.append(row);
        }
    }
});

проблема в том, что проверка поля name не работает, а текст проверки required никогда не отображается. Может быть form в ng-show неизвестно в директиве. Но я не знаю, как передать форму в директиву поля. Вы можете мне помочь, как это исправить? Спасибо.

вот живой код: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview


angularjs angularjs-directive angularjs-scope
person MarekLi    schedule 03.05.2013    source источник
comment
Я борюсь с той же проблемой. Я нашел недокументированную функцию в источнике angular: FormController имеет методы $addControl и $removeControl. Я подумываю использовать эти методы для динамического добавления элементов управления к родительскому FormController из директивы. Дам вам знать, если я добьюсь успеха.   -  person Igor Raush    schedule 28.05.2013

Ответы (3)


arrow_upward
5
arrow_downward

Задачи:

до:

$compile(row)(scope);
element.append(row);

после:

element.append(row);
$compile(row)(scope);

p / s в 'planker' для объектов добавить css:

.ng-invalid {
  border: 1px solid red;
}
person Vladimir    schedule 10.12.2013
comment
Хотя это очень неясно, на самом деле это ответ. Следует принять как можно скорее - person BorisOkunskiy; 12.07.2015

arrow_upward
2
arrow_downward

Вам нужно будет использовать директиву ng-form и вставить динамическое поле прямо в объект формы.

Эта ветка может вам помочь: https://github.com/angular/angular.js/issues/1404

person Ygor Cardoso    schedule 23.07.2013

arrow_upward
0
arrow_downward

Вот плункер, созданный для решения вашей проблемы: http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

Подводя итог, я добавил часы, которые будут переключать сообщение об ошибке вместо использования директивы ng-show. Когда вы пытаетесь динамически добавить директиву в директивную ссылку, все может стать непростым. В таком простом случае проще добавить собственные часы.

Вы также можете ознакомиться с этой директивой, которая предварительно настроена для обработки многих вариантов использования для проверки, а также позволяет легко создавать собственные проверки https://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) {
    if(invalid === true) {
        addRequiredErrorMessage();
    } else {
        removeRequiredErrorMessage();
    }
};
scope.$watch( watchIfRequired, toggleRequiredErrorMessage );
person nelsonomuto    schedule 23.06.2014