Brechen eines Formulars zwischen mehreren Tabs in Winkelbrüche Validierung

Question

Ich habe eine eckige Form zwischen mehreren Registerkarten mit eckigen UI-Direktive.

<form name="campaignForm" class="form-horizontal" novalidate > 
<input type="text" name="title" class="input-xxlarge" placeholder="Campaign title" ng-model="campaign.title" required> 
    <span ng-show="campaignForm.title.$error.required" class="help-inline"> 
     Required</span> 

<tabset> 
<tab> 
</tab> 
<input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom" required="" /> 
     <span ng-show="campaignForm.emailFrom.$error.required" class="help-inline"> 
      Required</span> 
<tab> 
<input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="Please enter email subject" required/> 
<span ng-show="campaignForm.emailSubject.$error.required" class="help-inline"> 
       Required</span> 
</tab> 
</tabset> 
</form> 

Bitte see my Plunker.

Wie Sie sehen können, funktioniert nur die Eingabe außerhalb der Tabs-Direktive. Die Validierung anderer Eingaben funktioniert nicht, da TABS Bereiche erstellt. Irgendwelche Ideen, wie man dieses Problem löst?

Answer 1

Vom ngForm directive docs:

In Angular Formulare können verschachtelt werden. Dies bedeutet, dass die äußere Form gültig ist, wenn alle untergeordneten Formulare ebenfalls gültig sind. Browser erlauben jedoch keine Verschachtelung von <form> Elementen, daher stellt Angular die ngForm-Direktive bereit, die sich identisch zu form verhält, aber verschachtelt werden kann.

Dies bedeutet, dass Sie Ihre campaignForm Form in Unterformen für jeden Reiter brechen kann:

<form name="campaignForm" class="form-horizontal" novalidate > 
    <tabset> 
    <tab heading="first"> 
     <div ng-form="emailForm"> 
     <input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom" required /> 
     <span ng-show="emailForm.emailFrom.$dirty && emailForm.emailFrom.$error.required" class="help-inline"> 
      Required 
     </span> 
     </div> 
    </tab> 

    <tab heading="second"> 
     <div ng-form="subjectForm"> 
     <input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="Please enter email subject" required/> 
     <span ng-show="subjectForm.emailSubject.$dirty && subjectForm.emailSubject.$error.required" class="help-inline"> 
      Required 
     </span> 
     </div> 
    </tab> 
    </tabset> 
</form> 

PLUNKER

Dies ist der Fall umgehen, wo Registerkarten-Richtlinie (oder durch eine andere das den isolate-Bereich verwendet) unterbricht den Geltungsbereich Ihres ngFormControllers.

Answer 2

Dieses genaue Problem ist in der neuesten Tabs.js-Datei von Github gelöst. Das Problem wurde erst kürzlich gelöst. Ich hatte genau das gleiche Problem und nach dem Herunterladen dieser Datei hat alles funktioniert.

Answer 3

Obwohl es alte Post, aber ich dachte, es jemand

<tabset> 
    <tab class="nav-item_new_active" id="tab_content_PARAM1" title="{{ctrl.parameter.param_LABEL_1}}" template-url="partials/param/PARAM_1.html"></tab> 
    <tab class="nav-item_new" ng-id="tab_content_PARAM2" title="{{ctrl.parameter.param_LABEL_2}}" template-url="partials/param/PARAM_2.html"></tab> 
</tabset> 

mir helfen wird, einen verschachtelten Controller in PARAM_1.html und PARAM_2.html mit Formularnamen als firstForm und secondForm hinzugefügt.

In dem Controller-Code von firstForm und secondForm i

$scope.$watch('secondForm.$valid', function(newVal) { 
     //$scope.valid = newVal; 
     var isPristine = $scope.secondForm.$pristine; 
     var isDirty = $scope.secondForm.$dirty; 
     console.log('secondForm Form isDirty'+isDirty); 
     //console.log('firstForm isPristine '+isPristine); 

     if($scope.secondForm.$valid==true){ 


      if(isPristine==true){ 
       console.log('secondForm Form is PRISTINE now '+$scope.secondForm.$valid); 

       //CHECK IF DIRTY IS TRUE HERE 
       if(isDirty==true){ 
        console.log('secondForm Form is isDirty TRUE NOW>>DECREMENT'); 
       } 
      } else { 
       // 
       isFormValidated = true; 
       console.log('secondForm IS COMPLETED NOW'+$scope.secondForm.$valid); 
       $scope.setValidationCount(); 
      }    
      //console.log('secondForm Form is valid now '+$scope.secondForm.$valid);  
     } else { 

      //HERE IS THE PLACE 
      if(isFormValidated==true){ 
       isFormValidated = false; 
       console.log('secondForm INVALIDATING FORM NOW'); 
       $scope.decrementValidationCount(); 
      } 

     } 

eine Watcher-Funktion, wie unten platziert Oberhalb der Codestück in nested-Controller für firstForm und secondForm platziert wird. Dieses Stück kann erkennen, ob die Form validiert wurde oder nicht. Es informiert das Hauptformular (myForm).

Mit diesem können Sie die Aktivieren und Deaktivieren oder Schaltflächen auf Hauptformular steuern, bis alle Unterformulare erfolgreich validiert sind.

Hinweis: setValidationCount und decrementValidationCount sind zwei Methoden im Hauptcontroller, die das Aktivieren und Deaktivieren von BUTTONS auf dem Hauptformular steuern.