19

送信時に招待状を生成するフォームを作成しています。招待状にはいくつかのフィールドがあり、そのうちの 1 つは [追加] ボタンに入力された電子メール アドレスで、クリックすると招待状を受信する電子メール アドレスのリストにそのアドレスが追加されます。

これは単一のフォームで実行できますが、ユーザーが電子メールを入力中に Enter キーを押すと、submitフォーム全体でトリガーされます。電子メール入力フィールドがフォーカスされているときに、入力キーの結果が「追加」ボタンをクリックしたのと同じ効果を持つようにしたいと考えています。これを解決する適切な方法は、次のように、招待フォーム内に電子メール エントリ フォームをネストすることだと思っていました。

    <ng-form ng-submit="sendInvite()">
        <input type="text" placeholder="Title" ng-model="invitation.title"/>

        <ng-form ng-submit="addInvitee()">
            <input type="email" placeholder="Title" ng-model="inviteeEmail"/>
            <button class="btn" type="submit">add</button>
        </ng-form>

        <button class="btn" type="submit">Send</button>
    </ng-form>

コントローラーで次の JavaScript を使用します。

    $scope.addInvitee = function() {
        $scope.invitation.emails.push($scope.inviteeEmail);
        $scope.inviteeEmail = '';
    }

    $scope.sendInvite = function() {
        //code to send out the invitation
    }

私の問題は、フォームをネストしたことです (そして、そうすると から に変換され<form>、<ng-form>いずれかを送信しても機能しなくなります。

プランカーはこちら

4

3 に答える 3

8

次の 2 つの方法のいずれかを使用して、フォームが送信されたときにどの JavaScript メソッドを呼び出す必要があるかを指定でき
ます
。 )
--フォーム ドキュメント

<ng-form>
   <input type="text" placeholder="Title" ng-model="invitation.title"><br>
   <ng-form>
     <input type="email" placeholder="Title" ng-model="inviteeEmail">
     <button class="btn" ng-click="addInvitee()">add</button><br>
   </ng-form>
   <ul class="unstyled">
     <li ng-repeat="invitee in invitation.invitees">
        <span>{{invitee.email}}</span>
     </li>
   </ul>
   <button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>

プランカー

于 2013-04-11T18:36:01.500 に答える
8

同様の要件があります-ウィザード駆動のマルチステップフォーム。ユーザーが [次へ] ボタンをクリックすると、現在のステップ フォームを検証する必要があります。

フォームへのバインドで ' $validate' イベントを発生させることにより、検証をトリガーできます。scope

isFormValid = function($scope, ngForm) {
    $scope.$broadcast('$validate');
    if(! ngForm.$invalid) {
      return true;
    }
}

フォームの値が正しいかどうかを確認したいときはいつでもisFormValid、スコープとフォームのインスタンスを呼び出します。

作業コード:プランカー リンク

状態に基づいて検証メッセージを表示/非表示にするため、フォームとフォームフィールドを作成するisFormValid (上記の Plunker に含まれる)ロジックをいくつか追加することも役立ちます。$dirty$dirty

于 2013-06-13T08:51:17.717 に答える