在角度断点验证中打破多个选项卡之间的表单

Question

我有一个角形形状,在几个标签之间插入角度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.

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

Answer 1

来自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范围的情况.