AngularJS - 如何觸發以嵌套形式提交

我正在構建一個表單，在提交時生成邀請。邀請有幾個字段，其中一個是帶有「添加」按鈕的電子郵件地址輸入，點擊時應將該地址添加到應接收邀請的電子郵件地址列表中。AngularJS - 如何觸發以嵌套形式提交

這可以通過一個表單來完成，但是如果用戶在輸入電子郵件時點擊回車鍵，那麼它會在整個表單上觸發submit。我想要輸入關鍵結果 - 當電子郵件輸入字段關注時 - 與單擊「添加」按鈕具有相同的效果。我預計，要解決這個正確的方法是窩邀請表單中的電子郵件報名表，這樣的事情：

<ng-form ng-submit="sendInvite()"> 
     <input type="text" placeholder="Title" ng-model="invitation.title"/> 

     <ng-form ng-submit="addInvitee()"> 
      <input type="email" placeholder="Title" ng-model="inviteeEmail"/> 
      <button class="btn" type="submit">add</button> 
     </ng-form> 

     <button class="btn" type="submit">Send</button> 
    </ng-form>

與控制器以下的javascript：

$scope.addInvitee = function() { 
     $scope.invitation.emails.push($scope.inviteeEmail); 
     $scope.inviteeEmail = ''; 
    } 

    $scope.sendInvite = function() { 
     //code to send out the invitation 
    }

我的問題的是，具有嵌套的形式（和這樣做從01轉換爲<ng-form>，提交任何一個不再有效。

Plunker here

來源

2013-04-10 Jamie A

驗證形式，或者提供一個提示......「你......提交」有機會取消，如果他們都沒有做 – charlietfl 2013-04-10 22:12:25

謝謝，這當然是一個辦法緩解這個問題，但這不是理想的行爲。 – 2013-04-11 13:20:48

也可以防止在焦點位置處輸入缺省值。將鍵處理程序綁定到字段並取消綁定。不能嵌套表格 – charlietfl 2013-04-11 13:26:08

您可以使用以下兩種方式之一，以指定當表單提交JavaScript方法應該叫：
*表單元素上ngSubmit指令
*對類型的第一個按鈕或輸入字段ngClick指令提交（輸入[類型=提交]）
- form docs

<ng-form> 
    <input type="text" placeholder="Title" ng-model="invitation.title"><br> 
    <ng-form> 
    <input type="email" placeholder="Title" ng-model="inviteeEmail"> 
    <button class="btn" ng-click="addInvitee()">add</button><br> 
    </ng-form> 
    <ul class="unstyled"> 
    <li ng-repeat="invitee in invitation.invitees"> 
     <span>{{invitee.email}}</span> 
    </li> 
    </ul> 
    <button class="btn" ng-click="sendInvite()">Send</button> 
</ng-form>

Plunker

來源

2013-04-11 18:36:01

謝謝，這是從我有的改進，但它不響應'enter'鍵事件。經過一番搗鼓之後，看起來'

@JamieA，對不起，我錯過了有關輸入鍵的部分（我拉起你的Plunker並修改它，但我只測試點擊按鈕）。我想你需要創建一個指令來獲得你想要的功能。 – 2013-04-12 20:54:48

內部提交在這裏什麼都不做。它由於ng-click而起作用。 Angular似乎並不想使用內部表單提交。正常工作的提交可以利用ng-submit。內部提交不能。 – 2014-05-13 08:22:43

心中已經e類似的要求 - 嚮導驅動的多步驟形式。當用戶點擊「下一步」按鈕時，我必須驗證當前的步驟表單。

我們可以通過觸發綁定到表單的scope上的'$validate'事件觸發驗證。

isFormValid = function($scope, ngForm) { 
    $scope.$broadcast('$validate'); 
    if(! ngForm.$invalid) { 
     return true; 
    } 
}

當過我要檢查，如果表單值是正確的，我會打電話給isFormValid與範圍&形式實例。

工作代碼：Plunker link

它也有一些額外的邏輯在isFormValid（包括在上述Plunker）基於這使得形式&表單字段$dirty，因爲我們將顯示/隱藏驗證消息有用在他們的$dirty狀態。

來源

2013-06-13 08:51:17 manikanta

基於plunker代碼，我建議同時切換'$ pristine'狀態，因爲它在設置'$ dirty'字段時不會自動移動。好的工作，謝謝你的解決方案！ – pulkitsinghal 2014-08-13 02:41:05

在撰寫本文時（AngularJS <1.2），沒有簡單的方法來重置'$ pritine'狀態。我們可以重置特定控件或表單的'$ pristine'狀態。但是，如果其中的任何其他控件的形式或其父窗體也都是'$ pristine'，我們還需要傳播該更改。這涉及更多。從1.2開始，有一個方法：'$ setPristine（..）'。 – manikanta 2015-01-27 12:38:39

當提交表單時，你可以找到使用一些東西都嵌套形式像下面

forms = [] 
forms.push(form) 
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))

這裏，形式是已提交的外形控制器。您可以在提交時提交此代碼，並查找所有嵌套表單並執行所需操作。

注：這是CoffeeScript的

來源

2016-09-16 15:48:07

AngularJS - 如何觸發以嵌套形式提交

回答

相關問題