0

我知道的

在 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 嵌套在其中的表单的名称，那么当我想知道父级是否已提交时就会遇到问题。我想要此信息，以便我可以将其用作何时显示嵌套 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 嵌套的表单的名称，或者我可以以某种方式监听父表单上的提交？

一个小玩意儿

我看过的

我曾尝试查看RealCrowds Angular-Utilities，并在我当前的项目中使用它（因为到目前为止我一直在使用 Angular 1.2），但他们似乎也无法处理这种情况。（尽管有一些讨论）

4

2 回答 2

1

要求指令中的父 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 示例

于 2015-09-02T12:09:37.473 回答
0

壁球！

我想我有一个解决方案给你：
正如我在 plunkr 上看到的，第二个跨度一直是隐藏的。
标记是您的提交按钮已分配给主表单，并且当您检查$submit时它没有提交，subForm因为没有<submit>. 据我了解，您可以一直检查主表格。你的叉子。subForm

希望我有所帮助。

于 2015-08-28T14:54:48.587 回答