Проверка поля формы 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>
Объяснение проблемы:
По умолчанию ввод элементов с использованием ngModelController (ng-model
) вызов FormController.$addControl
когда они связаны, чтобы зарегистрировать себя и выставить свойство на FormController
со свойством name входа, который {{ field.name }}
в этом случае. Таким образом, хотя элемент управления зарегистрирован, но у вас нет открытых свойств FormController
с именем email
, firstName
, у вас есть только {{ field.name }}
ссылка на последний элемент ввода
Объяснение решения:
В этом решении я создал пользовательскую директиву, чтобы заменить {{ field.name }}
с правильным именем во время выполнения.
Для получения дополнительной информации, почему я должен использовать terminal:true,
а также priority:1000
, посмотрите это обсуждение: добавьте директивы из директивы в AngularJS