我看了什么

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嵌套的表单名称，当我想知道父进程是否已经存在时，我遇到了问题提交。我想要这些信息，所以我可以将它用作何时在嵌套的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嵌套的表单的名称，或者我可以在某种程度上监听我的父表单上的提交？

A little plunker to play around with

我看了什么

我试过看RealCrowds Angular-Utilities，并在我当前的项目中使用它（因为到目前为止我一直在使用Angular 1.2），但似乎他们无法处理这个场景。（即使there have been some talk about it）

Answer 1

在指令中要求parent 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 - 假设主窗体有一个控制器。更精简的标记，不需要上面显示的需求示例

Answer 2

Squazz！

我想我有一个解决方案：
正如我在第二个跨度上所看到的那样，一直都是隐藏的标记是您的提交按钮已分配给主表单，当您在$submit上检查subForm时未提交，因为<submit>没有subForm }。
所以我知道你可以一直查看主表格。你的fork。

希望我帮助过。

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

我所知道的

问题

索引文件

指令

模板

我看了什么

2 个答案: