如何让ngForm知道其嵌套的表单已提交
[英]How to let ngForm know that the form it is nested in have been submitted
问题描述
What I know 
我知道的
In Angular 1.3 and above I have access to $submitted that can tell me if the form in question have been submitted. 在Angular 1.3及更高版本中，我可以访问$submitted ，它可以告诉我有关表单是否已提交。 This works fine and dandy when working with a form in a way like this: 当以这种方式使用表单时，这可以很好地工作：
<form name="myForm" ng-submit="register();" novalidate>
<div>
<input placeholder="First Name" name="name" type="text" ng-model="user.firstName" required />
<span ng-show="myForm.$submitted && myForm.name.$error.required"> First Name is required</span>
</div>
<ng-form name="subForm">
<div>
<input placeholder="Last Name" name="lastName" type="text" ng-model="user.Name" required />
<span ng-show="myForm.$submitted && subForm.lastName.$error.required"> Last Name is required</span>
</div>
</ng-form>
<input type="submit" value="Save" />
</form>
The problem 问题
But if I generate the ng-form dynamically, and therefore do not know the name of the form that the ng-form is nested in, I'm running into problems when I want to know if the parent have been submitted. 但是，如果我动态生成ng-form，因此不知道ng-form所嵌套的表单的名称，那么当我想知道是否已提交父表单时，就会遇到问题。 I want this information so I can use it as a parameter for when to show a validation error message for the input in the nested ng-form. 我需要此信息，因此可以将其用作何时显示嵌套ng-form中输入的验证错误消息的参数。
Say I have a directive that i want to use as part of my form. 假设我有一条指令要用作表单的一部分。
Index file 索引文件
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="lastNameDirective.js"></script>
</head>
<body ng-app="formExample">
<form name="myForm" novalidate>
<input placeholder="First Name" name="name" type="text" ng-model="user.firstName" required />
<span ng-show="myForm.$submitted && myForm.name.$error.required"> First Name is required</span><br />
<last-Name></last-Name>
<br />
<input type="submit" value="Save" />
</form>
</body>
</html>
Directive 指示
angular.module('formExample', [])
.directive('lastName', function() {
return {
restrict: 'E',
templateUrl: 'my-template.html'
};
});
Template 模板
<ng-form name="subForm">
<input placeholder="Last Name" name="lastName" type="text" ng-model="user.Name" required />
<span ng-show="subForm.$submitted && subForm.lastName.$error.required"> Last Name is required</span>
</ng-form>
How do I get around this situation? 如何解决这种情况？ Is there any way to either dynamically get the name of the form my ng-form is nested in, or can I somehow listen for a submit on my parent form? 有什么方法可以动态获取ng-form嵌套在其中的表单的名称，还是可以以某种方式侦听父表单上的提交？
A little plunker to play around with 一个小矮人玩
What I have looked at 我所看的
I have tried looking at RealCrowds Angular-Utilities , and is using this in my current project (as I have been using Angular 1.2 up till now), but it doesn't seem like they can handle the scenario either. 我尝试查看RealCrowds Angular-Utilities ，并在我当前的项目中使用了它（因为到目前为止我一直在使用Angular 1.2），但似乎他们也不能处理这种情况。 (Even though there have been some talk about it ) （即使有一些讨论 ）
2 个解决方案
解决方案1
1 已采纳 2015-09-02 12:09:37
Require the parents formController within the directive, and expose it. 在指令中需要父级formController并将其公开。
....directive('lastName', function() {
return {
restrict: 'E',
templateUrl: 'my-template.html',
require:'^form',
link:link
};
function link(scope, element, attrs, formCtrl) {
scope.parentForm = formCtrl;
}
});
http://plnkr.co/edit/pKonBjl57bjp4PaokARV http://plnkr.co/edit/pKonBjl57bjp4PaokARV
Would suggest exposing the parents formController through the controllerAs syntax - assuming the main form has a controller. 建议通过controllerAs语法公开父formController-假设主窗体有一个controller。 Leaner markup and no need for the require example shown above 更精简的标记，不需要上面显示的require示例
解决方案2
0 2015-08-28 14:54:48
Squazz! Squ！
I guess i have a solution for you: 我想我有一个适合您的解决方案：
as i saw on plunkr second span was hide all the time. 正如我在plunkr上看到的那样，第二段时间一直都是隐藏的。
The mark is that your submit button is assigned to the main form, and when you check $submit on a subForm it was not submitted, because there is no <submit> for the subForm . 该标志是你的提交按钮被分配到主窗体，当您检查$submit上一subForm它没有提交，因为没有<submit>的subForm 。
so as i understood you can check a main form all time. 因此，据我了解，您可以一直检查主要表格。 Your fork . 你的叉子 。
Hope i helped. 希望我能帮上忙。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.