9

我在几个带有角度 UI 指令的选项卡之间吐出了一个角度形式。

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

请看我的 Plunker。

如您所见，只有 tabs 指令之外的输入有效。其他输入验证不起作用，因为 TABS 创建范围。任何想法如何解决这个问题？

4

2 回答 2

38

从ngForm 指令文档：

在 Angular 中，表单可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套<form>元素，因此 Angular 提供了ngForm指令，该指令的行为与嵌套相同，form但可以嵌套。

这意味着您可以将campaignForm表单分解为每个选项卡的子表单：

<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

这将避免 tabs 指令（或任何其他使用隔离作用域的指令）破坏 ngFormController 作用域的情况。

于 2013-07-02T09:54:35.873 回答
0

虽然这是旧帖子，但我认为它会对某人有所帮助

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

我在 PARAM_1.html 和 PARAM_2.html 中添加了一个嵌套控制器，表单名称分别为 firstForm 和 secondForm。

在 firstForm 和 secondForm 的控制器代码中，我放置了一个观察器函数，如下所示

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

        }

上面的代码被放置在 firstForm 和 secondForm 的嵌套控制器中。这件作品可以检测表单是否已经过验证。它通知主表单（myForm）。

有了这个，您可以控制主窗体上的启用和禁用或按钮，直到所有子窗体都成功验证。

注意：setValidationCount 和 decrementValidationCount 是主控制器中的两个方法，用于控制主窗体上 BUTTONS 的启用和禁用。

于 2017-06-15T07:45:56.227 回答