Проверка поля формы AngularJS

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

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

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

myForm.elName.$valid

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

Я создал jsFiddle для демонстрации проблемы: http://jsfiddle.net/peduarte/HB7LU/1889/

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

FANX.

РЕДАКТИРОВАТЬ:
Я имел в виду эту УДИВИТЕЛЬНУЮ документацию: http://docs.angularjs.org/api/ng.directive:input.email

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 со свойством name входа, который {{ field.name }} в этом случае. Таким образом, хотя элемент управления зарегистрирован, но у вас нет открытых свойств FormController с именем email, firstName, у вас есть только {{ field.name }} ссылка на последний элемент ввода

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

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

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

Другие вопросы по тегам