Phá vỡ biểu mẫu giữa nhiều tab trong ngắt kết nối góc xác thực

Question

Tôi có biểu mẫu góc được nhổ giữa một số tab có chỉ thị giao diện người dùng góc.

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

Vui lòng see my Plunker.

Như bạn thấy, chỉ các đầu vào bên ngoài các tab hoạt động. Các xác nhận đầu vào khác không hoạt động vì TABS tạo phạm vi. Bất kỳ ý tưởng làm thế nào để giải quyết vấn đề này?

Answer 1

Từ ngForm directive docs:

Trong góc, hình thức có thể được lồng vào nhau. Điều này có nghĩa là biểu mẫu bên ngoài là hợp lệ khi tất cả các biểu mẫu con đều hợp lệ. Tuy nhiên, các trình duyệt không cho phép lồng ghép các phần tử <form>, do đó Angular cung cấp chỉ thị ngForm, hoạt động giống hệt với form nhưng có thể lồng nhau.

Điều này có nghĩa rằng bạn có thể phá vỡ hình thức campaignForm của bạn thành các hình thức cho mỗi tab:

<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

này sẽ phá vỡ các trường hợp chỉ thị các tab (hoặc bất kỳ chỉ thị khác sử dụng phạm vi cách ly) đang phá vỡ phạm vi của ngFormController của bạn.

Answer 2

Sự cố chính xác này được giải quyết trong tệp tab.js mới nhất từ ​​Github. Vấn đề đã được giải quyết rất gần đây. Tôi đã có chính xác cùng một vấn đề và sau khi tải về tập tin đó tất cả mọi thứ đã làm việc.

Answer 3

Mặc dù nó là bài cũ, nhưng tôi nghĩ rằng nó sẽ giúp một ai đó

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

Tôi đã thêm một bộ điều khiển lồng nhau trong PARAM_1.html và PARAM_2.html với tên dạng như firstForm và secondForm.

Trong các mã điều khiển của firstForm và secondForm tôi đặt một chức năng quan sát như sau

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

     } 

Trên đoạn mã được đặt trong bộ điều khiển lồng nhau cho firstForm và secondForm. Phần này có thể phát hiện nếu biểu mẫu đã được xác thực hay không. Nó thông báo cho form chính (myForm).

Với điều này, bạn có thể kiểm soát bật và tắt hoặc nút trên biểu mẫu chính cho đến khi tất cả các biểu mẫu phụ được xác thực thành công.

Lưu ý: setValidationCount and decrementValidationCount là hai phương thức trong bộ điều khiển chính điều khiển việc bật và tắt BUTTONS trên biểu mẫu chính.