在角度中断验证中打破多个选项卡之间的表单 [英] Breaking a form between multiple tabs in angular breaks validation

问题描述

我有一个带有角度 UI 指令的选项卡之间的角度形式.

<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">必需</span><标签集><标签></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">必需</span><标签><input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="请输入电子邮件主题" required/><span ng-show="campaignForm.emailSubject.$error.required" class="help-inline">必需</span></tab></tabset></表单>

请查看我的 Plunker.

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

解决方案

来自 ngForm 指令文档:

<块引用>

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

这意味着您可以将 campaignForm 表单分解为每个标签的子表单:

<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">必需的</span>

</tab><标签标题=第二个"><div ng-form="subjectForm"><input type="text" name="emailSubject" class="input-xxlarge" ng-model="campaign.info.emailSubject" placeholder="请输入电子邮件主题" required/><span ng-show="subjectForm.emailSubject.$dirty &&subjectForm.emailSubject.$error.required" class="help-inline">必需的</span>

</tab></tabset></表单>

PLUNKER

这将避免 tabs 指令(或任何其他使用隔离范围的指令)破坏 ngFormController 范围的情况.

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>

Please see my Plunker.

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?

解决方案

From the ngForm directive docs:

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.

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

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

这篇关于在角度中断验证中打破多个选项卡之间的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！