Динамическая проверка и имя в форме с помощью AngularJS

У меня есть эта форма: http://jsfiddle.net/dfJeN/

Поскольку вы можете увидеть, что значение имени для ввода статически установлено:

name="username" 

, проверка формы отлично работает (добавьте что-нибудь и удалите весь текст с ввода, появится текст).

Затем я пытаюсь динамически установить значение имени: http://jsfiddle.net/jNWB8/

 name="{input.name}" 

Затем я применяю это к моей проверке

 login.{{input.name}}.$error.required 

(этот шаблон будет использоваться в ng-repeat), но моя проверка формы нарушена. Он правильно интерпретируется в моем браузере (если я проверяю элемент, я видел login.username. $ Error.required).

Есть идеи ?

EDIT: после регистрации области в консоли,

 {{input.name}} 

выражение не интерполируется. Моя форма как {{input.name}}, но не имя пользователя.

UPDATE: Поскольку 1.3.0-rc.3 name = “{{input.name}}” работает должным образом. См. # 1404

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

Предполагая, что вы пытаетесь сделать, вам нужно динамически добавлять элементы в форму с чем-то вроде ng-repeat, вам нужно использовать вложенную ng-форму, чтобы разрешить проверку этих отдельных элементов:

 
required

К сожалению, это не очень хорошо документированная особенность Angular.

Использование вложенного ngForm позволяет вам получить доступ к определенному InputController из HTML-шаблона. Однако, если вы хотите получить доступ к нему с другого controllerа, это не поможет.

например

   

Я использую эту директиву, чтобы помочь решить проблему:

 angular.module('test').directive('dynamicName', function($compile, $parse) { return { restrict: 'A', terminal: true, priority: 100000, link: function(scope, elem) { var name = $parse(elem.attr('dynamic-name'))(scope); // $interpolate() will support things like 'skill'+skill.id where parse will not elem.removeAttr('dynamic-name'); elem.attr('name', name); $compile(elem)(scope); } }; }); 

Теперь вы используете динамические имена везде, где требуется только атрибут «dynamic-name» вместо атрибута «name».

например

   

Проблема должна быть зафиксирована в AngularJS 1.3, согласно этой дискуссии на Github .

Между тем, вот временное решение, созданное @caitp и @Thinkscape :

 // Workaround for bug #1404 // https://github.com/angular/angular.js/issues/1404 // Source: http://plnkr.co/edit/hSMzWC?p=preview app.config(['$provide', function($provide) { $provide.decorator('ngModelDirective', function($delegate) { var ngModel = $delegate[0], controller = ngModel.controller; ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) { var $interpolate = $injector.get('$interpolate'); attrs.$set('name', $interpolate(attrs.name || '')(scope)); $injector.invoke(controller, this, { '$scope': scope, '$element': element, '$attrs': attrs }); }]; return $delegate; }); $provide.decorator('formDirective', function($delegate) { var form = $delegate[0], controller = form.controller; form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) { var $interpolate = $injector.get('$interpolate'); attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope)); $injector.invoke(controller, this, { '$scope': scope, '$element': element, '$attrs': attrs }); }]; return $delegate; }); }]); 

Демо на JSFiddle .

Ницца @EnISeeK …. но я получил его более элегантным и менее навязчивым для других директив:

 .directive("dynamicName",[function(){ return { restrict:"A", require: ['ngModel', '^form'], link:function(scope,element,attrs,ctrls){ ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName; ctrls[1].$addControl(ctrls[0]); } }; }]) 

Просто небольшое улучшение по сравнению с решением EnlSeek

 angular.module('test').directive('dynamicName', ["$parse", function($parse) { return { restrict: 'A', priority: 10000, controller : ["$scope", "$element", "$attrs", function($scope, $element, $attrs){ var name = $parse($attrs.dynamicName)($scope); delete($attrs['dynamicName']); $element.removeAttr('data-dynamic-name'); $element.removeAttr('dynamic-name'); $attrs.$set("name", name); }] }; }]); 

Вот пробная версия . Вот подробное объяснение

Я немного расширяю решение @caitp и @Thinkscape, чтобы создать динамически созданные вложенные ng-формы , например:

 
Dirty:
Dirty:

Вот моя демонстрация на JSFiddle .

Я использовал решение Бена Лэша, и он хорошо работает для меня. Но одна проблема, с которой я столкнулся, заключалась в том, что когда я добавлял внутреннюю форму с использованием ng-form , все состояния формы, например form.$valid, form.$error т. Д. Стали неопределенными, если я использовал директиву ng-submit .

Поэтому, если бы у меня было это, например:

 

И в моем controllerе:

 $scope.saveRecord = function() { outerForm.$valid // this is undefined } 

Поэтому мне пришлось вернуться к использованию обычного события click для отправки формы, и в этом случае необходимо передать объект формы:

 

И пересмотренный метод controllerа:

 $scope.saveRecord = function(outerForm) { outerForm.$valid // this works } 

Я не совсем понимаю, почему это так, но, надеюсь, это помогает кому-то.

Эта проблема исправлена ​​в Angular 1.3+. Это правильный синтаксис для того, что вы пытаетесь сделать:

 login[input.name].$invalid 
  • Переменные привязки от Service / Factory to Controllers
  • ng-app vs. data-ng-app, в чем разница?
  • AngularJS: ng-show / ng-hide не работает с `{{}}` интерполяцией
  • Как фильтровать (ключ, значение) с помощью ng-repeat в AngularJs?
  • Как читать stream pdf в angularjs
  • ионное приложение не может подключить сервер с поддержкой cors с помощью $ http
  • Фильтрация углового 1.2 ng-repeat с помощью «track by» с помощью булевого свойства
  • Угловое $ location.path не работает
  • Связь с компилятором и controllerом
  • VueJs templating. Как загрузить внешние шаблоны
  • AngularJS отслеживает изменение DOM
  • Interesting Posts

    Почему пустые выражения легальны в C / C ++?

    Преобразование числового представления столбца «переменная» в исходную строку после таяния с использованием шаблонов

    Почему Windows7 просыпается после того, как я переспал?

    Android: checkbox прослушиватель

    Android KitKat 4.4 Hangouts не может обрабатывать намерение отправки SMS

    пример подключения / отмены привязки (android)

    Настройте hibernate (используя JPA) для хранения Y / N для типа Boolean вместо 0/1

    Как настроить макет Android для поддержки всех размеров экрана?

    Android 8.0: java.lang.IllegalStateException: не разрешено запускать сервис Intent

    Каковы новые слова «for», «at», «in» в объявлениях Swift3?

    Объединить 2 таблицы Excel в одно дополнение данных?

    Худший случай для QuickSort – когда это может произойти?

    Как кодировать мультимедийные запросы CSS, предназначенные для ВСЕХ мобильных устройств и планшетов?

    build.gradle и проектные библиотеки

    Какова альтернатива датчику ориентации андроида?

    Давайте будем гением компьютера.