Как форма доступа в ng-repeat?

Здесь четкий пример форм:

<div ng-form="namesForm_{{$index}}" ng-repeat="name in names">
<input type="text"
       name="input_{{$index}}_0"></input>
<!-- ... -->

Хорошо, но как мне получить доступ к полю $valid из формы? Например, это не работает:

{{namesForm_$index.$valid}}

Даже {{namesForm_$index}} выводит 0.

Необходимо "встроить" $index перед тем, как {{}} разрешить имя переменной. Как это сделать?


javascript angularjs angularjs-forms
person Cherry    schedule 23.11.2017    source источник
comment
где вы хотите получить к нему доступ? в нг-отключено? в пользовательской директиве в форме? Вы хотите вывести значение на экран? это существенная деталь, которой здесь не хватает   -  person jannis    schedule 24.11.2017

Ответы (2)


arrow_upward
0
arrow_downward

Нелегко получить его внутри одного выражения {{ }}, но если вы хотите использовать его только в директивах, принимающих выражения без руля (например, ng-disabled), вы можете добиться этого:

<div ng-app>
    <ng-form name="namesForm_{{$index}}" ng-repeat="name in [1, 2]">
      <input type="text" 
             placeholder="{{$index}}"
             ng-required="true"
             ng-model="test"
             name="hey" />
      
      <button ng-disabled="!namesForm_{{$index}}.$valid">
        send
      </button>
     
    <br />
</ng-form>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

person Piotr Lewandowski    schedule 23.11.2017

arrow_upward
0
arrow_downward 

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element("formName" + index);
   return form.$valid;
};

ОБНОВЛЕНО

Рабочий пример:

{{ IsFormValid($index) }}

$scope.IsFormValid = function(index) {
   var form = angular.element(document.getElementById('#bucketForm-' + index);
   return form.$valid;
};

Новый подход

Ниже приведен пример для динамической ngModel, то же самое можно воспроизвести для имени формы:

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>
person Danish    schedule 23.11.2017
comment
Нет нет нет. Вопрос в том, как получить объект формы, когда он имеет динамическое имя :) - person Cherry; 23.11.2017
comment
хорошо, тогда вы можете вызвать функцию, отправляющую $index в качестве параметра и возвращающую имя формы, или форма действительна или нет.... {{ IsFormValid($index) }} - person Danish; 23.11.2017
comment
Спасибо за быстрый ответ, но angular.element("formName" + index) дает мне Looking up elements via selectors is not supported by jqLite :( - person Cherry; 24.11.2017
comment
Я вижу, дай мне посмотреть еще раз. - person Danish; 24.11.2017
comment
Я обновил пример, но теперь у меня Referencing DOM nodes in Angular expressions is disallowed!, потому что я пытаюсь установить значение класса. - person Cherry; 24.11.2017
comment
все еще смотрю на это. Пожалуйста подождите. - person Danish; 24.11.2017