Rottura di un modulo tra più schede nella convalida delle interruzioni angolari

Question

Ho una forma angolare spitted tra più schede con direttiva UI angolare.

<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> 

Per favore see my Plunker.

Come si può vedere, solo la direttiva input tabs funziona. La convalida degli altri input non funziona perché TAB crea ambiti. Qualche idea su come risolvere questo problema?

Answer 1

Dal ngForm directive docs:

In angolare, forme possono essere nidificati. Ciò significa che la forma esterna è valida quando anche tutti i moduli figlio sono validi. Tuttavia, i browser non consentono la nidificazione degli elementi <form>, pertanto Angular fornisce la direttiva ngForm, che si comporta in modo identico a form ma può essere nidificata.

Questo significa che è possibile rompere il modulo campaignForm in sotto-moduli per ciascuna scheda:

<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

Ciò aggirare il caso in cui la direttiva schede (o di qualsiasi altra direttiva che utilizza l'ambito isolato) interrompe l'ambito del tuo ngFormController.

Answer 2

Questo problema esatto viene risolto nell'ultimo file tabs.js di Github. Il problema è stato risolto molto recentemente. Ho avuto esattamente lo stesso problema e dopo aver scaricato quel file tutto ha funzionato.

Answer 3

Anche se è vecchio post, ma ho pensato che sarebbe aiutare qualcuno

<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> 

ho aggiunto un nidificate controller in PARAM_1.html e PARAM_2.html con i nomi di forma come FirstForm e secondForm.

Nel codice controllore di FirstForm e secondForm posi una funzione osservatore come sotto

$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(); 
      } 

     } 

Sopra porzione di codice viene inserito nel regolatore for innestati FirstForm e secondForm. Questo pezzo può rilevare se il modulo è stato convalidato o meno. Informa il modulo principale (myForm).

Con questo è possibile controllare l'abilitazione e disabilitare i pulsanti sul modulo principale finché tutti i moduli secondari non vengono convalidati correttamente.

Nota: setValidationCount e decrementValidationCount sono due metodi nel controller principale che controlla l'abilitazione e disabilitazione dei PULSANTI sul modulo principale.