ng-submit、フォームを削除し、「フォームが接続されていないためにフォームの送信がキャンセルされました」

ng-clickまたはng-submitを使用してフォームを送信するときに、角度1を使用して変数を設定しようとしています。その変数は、ng-ifを使用してカスケードしてフォームをDOMから削除します。ただし、「フォームが接続されていないためフォームの送信がキャンセルされました」というエラーメッセージが表示され、フォームが表示されません。ng-submit、フォームを削除し、「フォームが接続されていないためにフォームの送信がキャンセルされました」

はここで完全MWEだ：私は完全にng- *属性を削除するたびに

<html> 
    <head> 
    <title>Something</title> 
    </head> 
    <body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
     <div ng-if="status.value=='ok'"> 
     <form action="url" method="post" target="_blank"> 
      <button type="submit" ng-click="status.value='newwindow'">Open in new window</button> 
     </form> 
     </div> 
     <div>{{status}}</div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 
     var ctrl = app.controller('myCtrl', ['$scope', function($scope) { 
     $scope.status = {'value':'ok'}; 
     }]); 
    </script> 
    </body> 
</html>

は、フォームが正常に送信しますが、その後、変数は更新されません。

フォームを投稿するだけの長さでフォームを保持する方法に関する提案はありますか？

出典

2017-09-07 Jolyon

迅速なGoogle検索は、あなたのエラーは、フォーム要素はDOMの一部ではないが原因であることを示唆しています。デバッグに役立つよう、すべてのHTMLとAngular codeを含めてください。 –

私はそれを見ました。最初の紅茶では、フォームが明らかにDOMの一部だったように見えましたが、とにかく私は一緒にストライプ版を作成しました。完全なMWEをまとめると、フォームが投稿される前にng- *イベントが実際にフォームを削除していたようです。更新された質問を参照してください。 – Jolyon

ng-clickは関数を参照するべきです –

コード内の問題はng-ifです。ボタンをクリックすると、status.valueはのすぐにに更新され、$digestサイクルになります。 $digestサイクルでは、ng-ifがfalseになり、DOMからdiv（フォームを含む）全体が削除されます。

一つの可能な修正ではなくng-ifのng-show、ちょうど皮革要素を使用することですが、DOMからは削除されません。

さらに、ng-clickをすべてのフォーム送信ロジックを処理する関数にアタッチし、デフォルトの送信をevent.preventDefault()で抑制することもできます。

出典

2017-09-07 02:16:26 Claies

実際には、自分のコードで（そしてDOMの変更が必要な）変更が必要なng-switchですが、MWEの良いケースになっていると思います。だから、私のためのsg-showはありません。私は手動でフォームを提出する必要があるように思えます。 – Jolyon

ええ、私は 'ng-switch'を使いフォームをそのままにしておく方法がわかりません。 – Claies

@Claiesの提案に感謝します。他に誰かが手動でフォームを提出する必要がある場合は、この質問が非常に役に立ちます。https://stackoverflow.com/questions/29823626/angular-http-post-to-target-blank – Jolyon

<html> 
    <head> 
    <title>Something</title> 
    </head> 
    <body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
     <div ng-if="status.value=='ok'"> 
     <form action="url" method="post" ng-submit="formSubmit()" target="_blank"> 
      <button type="submit" ng-click="status.value='newwindow'">Open in new window</button> 
     </form> 
     </div> 
     <div>{{status}}</div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 
     var ctrl = app.controller('myCtrl', ['$scope', function($scope) { 
     $scope.status = {'value':'ok'}; 
$scope.formSubmit=function(){ 
//here you can write you business logic here 
}; 
     }]); 
    </script> 
    </body> 
</html>

またはあなたも書き込むことができます。

あなたのコントローラで

<form action="url" method="post" target="_blank"> 
       <button type="submit" ng-click="postData()">Open in new window</button> 
      </form>

：

$scope.postData=function(){ 
//logic will be here: 
}

出典

2017-09-07 05:09:54

ng-submit、フォームを削除し、「フォームが接続されていないためにフォームの送信がキャンセルされました」

答えて

関連する問題