如何让ngForm知道嵌套的表单已经提交

Question

我所知道的

在 Angular 1.3 及更高版本中，我可以访问 $submitted，它可以告诉我相关表单是否已提交。当以这样的方式使用表单时，这工作得很好而且花花公子：

<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>

问题

但是如果我动态生成 ng-form，因此不知道嵌套 ng-form 的表单的名称，那么当我运行想知道 parent 是否已提交。我需要此信息，因此我可以将其用作何时显示嵌套 ng-form.

中输入的验证错误消息的参数

假设我有一个指令要用作我的表单的一部分。

索引文件

<!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>

指令

angular.module('formExample', [])
  .directive('lastName', function() {
    return {
      restrict: 'E',
      templateUrl: 'my-template.html'
    };
  });

模板

<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>

我该如何解决这种情况？有什么方法可以动态获取嵌套我的 ng-form 的表单的名称，或者我可以以某种方式监听 parent 表单上的提交吗？

A little plunker to play around with

我看过的

我试过 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. (Even though there have been some talk about it)

Answer 1

斯奎兹！

我想我有适合你的解决方案：
正如我在 plunkr 上看到的那样，第二个跨度一直是隐藏的。
标记是您的提交按钮已分配给主表单，当您在 subForm 上选中 $submit 时，它没有提交，因为 subForm 没有 <submit> ].
据我了解，您可以随时检查主窗体。你的 fork.

希望我有所帮助。

Answer 2

在指令中要求父 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

建议通过 controllerAs 语法公开父 formController - 假设主窗体有一个控制器。更精简的标记，不需要上面显示的 require 示例

如何让ngForm知道嵌套的表单已经提交

How to let ngForm know that the form it is nested in have been submitted

javascript

forms

validation

angularjs

angularjs-ng-form

我所知道的

问题

索引文件

指令

模板

我看过的