我正在构建一个在提交时生成邀请的表单.邀请函有几个字段,其中一个是带有"添加"按钮的电子邮件地址输入,点击该按钮时,应将该地址添加到应接收邀请的电子邮件地址列表中.
这可以使用单个表单完成,但是如果用户在键入电子邮件时按下回车键,则会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>
Run Code Online (Sandbox Code Playgroud)
在控制器中使用以下javascript:
$scope.addInvitee = function() {
$scope.invitation.emails.push($scope.inviteeEmail);
$scope.inviteeEmail = '';
}
$scope.sendInvite = function() {
//code to send out the invitation
}
Run Code Online (Sandbox Code Playgroud)
我的问题是嵌套表单(并且这样做转换<form>
为<ng-form>
,提交任何一个不再有效.