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 - 如何触发以嵌套形式提交

回答

相关问题