Подтвердить что ты не робот

Угловая динамическая форма поля

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

Таким образом, элементы input динамически создаются внутри ng-repeat. Поэтому атрибуты input также динамически добавляются, например, type, name и т.д.

Однако, поскольку атрибут name динамически добавляется, когда я пытаюсь его проверить, например:

myForm.elName.$valid

Он ничего не возвращает, потому что на данный момент он не знает, что такое elName.

Я создал jsFiddle, чтобы продемонстрировать проблему: http://jsfiddle.net/peduarte/HB7LU/1889/

Любая помощь или совет будут очень благодарны!

FANX.

EDIT:
Я имею в виду эту документацию AWESOME: http://docs.angularjs.org/api/ng.directive:input.email

4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте выполнить мою собственную директиву:

myApp.directive("dynamicName",function($compile){
  return {
      restrict:"A",
      terminal:true,
      priority:1000,
      link:function(scope,element,attrs){
          element.attr('name', scope.$eval(attrs.dynamicName));
          element.removeAttr("dynamic-name");
          $compile(element)(scope);
      }
   };
});

Используйте его:

<input dynamic-name="field.name"
       type="{{ field.type }}"
       placeholder="{{ field.name }}"
       ng-model="field.value"
       required>

DEMO

Объяснение проблемы:

По умолчанию элементы ввода, использующие ngModelController (ng-model), вызывают FormController.$addControl, когда они связаны с самим регистром и выставляют свойство на FormController с свойством имени ввода, которое {{ field.name }} в этом случае. Поэтому, несмотря на то, что элемент управления зарегистрирован, но у вас нет открытых свойств на FormController с именем email, firstName, у вас есть только {{ field.name }}, ссылающийся на последний элемент ввода

Объяснение решения:

В этом решении я создал настраиваемую директиву, чтобы заменить {{ field.name }} на правильное имя во время выполнения.

Для получения дополнительной информации, почему я должен использовать terminal:true, и priority:1000, ознакомьтесь с этим обсуждением: Добавить директивы из директивы в AngularJS