Как получить доступ к множественной форме в контроллере в angularjs?

Question

Как получить доступ к множественной форме в контроллере в angularjs?

Я должен выполнить проверку формы для нескольких форм, которые необходимо создать динамически. Я создал формы динамически, используя <button ng-click = "navigate ()" > Далее </ button> <div ng-repeat = "служба в сервисах" > <ng-form name = "mainform" > <div ng -repeat = "spec in service.products" > <ng-form name = "subform" > <input type = "text" name = "{{spec.name}}" ng-model = "spec.value" > <span ng-show = "subform [spec.name]. $ invalid" > введите </ span> </ ng-form> </ div> </ ng-form> </ div >, но я не могу для доступа к этой форме в контроллере.

Проверьте код:

 $scope.navigate=function(){
     console.log($scope.mainform.subform);
     console.log($scope.subform);
 }

Он работает нормально, но мне нужно проверить, действительно ли по крайней мере одна из подформ неопределенных или нет после нажатия на следующую кнопку, поэтому я попытался получить доступ к этому в контроллере следующим образом:

ng-form mainForm
  ng-form subFormOne
  ng-form subFormTwo

но я получаю subFormOneдля обоих консольных журналов. Как я могу получить доступ к нескольким динамически созданным формам в контроллере?

javascript,angularjs,forms,validation,

4

Ответов: 3

JavaScript, angularjs, формы, валидация,

Похожие вопросы

score 1 · Accepted Answer

1

Что именно вы хотите делать с формами в контроллере?

Похоже, вам это не нужно.

У вас есть иерархия форм. псевдокод:

subFormTwo

Если mainFormили mainFormнедействительно, то mainForm.$validтакже будет недействительным. Если все подформы действительны, то mainFormтакже будут действительны. Вы будете проверять только код..ng-form.ng-invalid { background-color: #ff0000; }

Если вам нужно как-то стилизовать его, я рекомендую вам использовать css. Директива ngForm добавляет классы к элементу. Вы можете использовать .ng-form selector в css для добавления стилей в вашу форму. Например:

undefined

Вот пример plunkr .

score 1 · Accepted Answer

1

Журналы показывают, ng-repeatпотому что, поскольку ng-repeatдиректива создает дочерние области и формы помещаются в эти дочерние области.

Создайте форму на верхнем уровне, над :<button ng-click="navigate()">Next</button>  <ng-form name=top> <div ng-repeat="service in services"> <ng-form name="mainform_{{$index}}"> <div ng-repeat="spec in service.products"> <ng-form name="subform_{{$index}}"> <input name="{{spec.name}}" ng-model="spec.value"> </ng-form> </div> </ng-form> </div> </ng-form>

ng-repeat

Тогда формы внутри ng-repeatвидимости будут видны:

$scope.navigate=function(){
     console.log($scope.top);
     console.log($scope.top.mainform_0);
     console.log($scope.top.mainform_0.subform_0);
};

DEMO на PLNKR

score 0 · Accepted Answer

0

Я бы использовал $ index из ng-repeat или что-то делает его уникальным.

ОБНОВЛЕНИЕ: 12/6/2016 На основе комментария.

plnkr глубоко вложенных динамических форм и валидации

<button ng-click="navigate()">Next</button>
<div class="outer" ng-repeat="service in services" ng-init="serviceSuffix=$index;serviceForm = 'form' +serviceSuffix">
  <h2>{{service.serviceName}} id= {{service.id}} {{serviceForm}}</h2>

  <ng-form name="{{serviceForm}}">
    <button ng-click="isValidForm(serviceSuffix)">Is Outer valid</button>
    <div class="inner" ng-repeat="spec in service.products" ng-init="specSuffix = serviceSuffix+'_'+$index; specForm = 'form' +specSuffix; ">
      <h2>{{spec.specName}} id={{spec.id}} {{specForm}}</h2>
      <ng-form name="{{specForm}}">
        <input required type="text" name="{{spec.specName}}" ng-model="spec.value">
        <span ng-show="this[specForm][spec.specName].$invalid">please enter</span>
        <button ng-click="isValidForm(specSuffix)">Is Inner valid</button>
      </ng-form>
    </div>
  </ng-form>
</div>

Чтобы получить доступ к n-й форме в вашем контроллере.

  $scope.isValidForm = function(suffix) {
    alert('form '+suffix+' valid='+$scope['form' +suffix].$invalid)
  };