打破了角休息验证多个标签之间的一种形式 [英] Breaking a form between multiple tabs in angular breaks validation

问题描述

我有几个卡口与角UI指令之间的角形式吐尽。

I have an angular form spitted between several tabs with angular UI directive.

<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创建范围。任何想法如何解决这个问题呢？

As you can see, only the input outside tabs directive works. The other inputs validation doesn't work because TABS create scopes. Any ideas how to solve this issue?

推荐答案

从 ngForm指令文档：

在棱角分明，形式可以嵌套。这意味着，外形式是有效的，当所有的子形式是有效的，以及。然而，浏览器不允许嵌套＆LT;形式＆GT; 元素，所以角度提供了 ngForm 指令，其行为相同到格式，但可以嵌套。

In Angular, forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form> elements, so Angular provides the ngForm directive, which behaves identically to form but can be nested.

这意味着，你可以把你的 campaignForm 形式进入子表单为每个标签：

This means that you can break your campaignForm form into sub-forms for each 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

这将规避其中，标签指令（或使用隔离范围内的任何其他指令）已破坏你的ngFormController的范围的情况。

This will circumvent the case where tabs directive (or any other directive that uses isolate scope) is breaking your ngFormController's scope.

这篇关于打破了角休息验证多个标签之间的一种形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！