0

私が知っていること

$submittedAngular 1.3 以降では、問題のフォームが送信されたかどうかを確認できるアクセス権があります。次のような方法でフォームを操作する場合、これはうまく機能します。

<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 フォームの入力に対して検証エラー メッセージをいつ表示するかのパラメーターとして使用できます。

フォームの一部として使用したいディレクティブがあるとします。

索引ファイル

<!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 に答える