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>

私のプランカーを見てください。

ご覧のとおり、input outside tabs ディレクティブのみが機能します。TABS がスコープを作成するため、他の入力の検証は機能しません。この問題を解決する方法はありますか?

4

2 に答える 2

38

ngForm ディレクティブ docsから:

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 ディレクティブ (または、isolate スコープを使用するその他のディレクティブ) が ngFormController のスコープを壊しているケースを回避できます。

于 2013-07-02T09:54:35.873 に答える