2

私は AngularJS を使用しており、データを POST する必要があるベンダーがいます。送信すると、ユーザーは私のサイトにリダイレクトされます。

<form method="post" action="https://api.chargify.com/api/v2/signups">
  <input type="hidden" name="secure[api_id]"    value="1234" />
  <input type="hidden" name="secure[timestamp]" value="1301148971" />
  <input type="hidden" name="secure[nonce]"     value="5b2763d0-39e1-012e-858d-64b9e8d3946e" />
  <input type="hidden" name="secure[data]"      value="one=uno&amp;two=dos" />
  <input type="hidden" name="secure[signature]" value="412951d095ebbb3800dfb2126fe5073d2ab6c260" />
</form>

詳細については、Chargify Direct サインアップを参照してください。

彼らは CORS セットアップを持っていないので、$http サービスを使用してデータを投稿することはできません。昔ながらのフォームでこれを行う必要があるようです。角度の検証とフォーム送信の防止に関する問題が発生しています。action 属性が存在する場合、明らかに angularは ng-submit の結果を無視します。

さらに、フォームに action、data-action、または x-action 属性が含まれていない場合に限り、デフォルトのアクション (フォームの場合はサーバーにリクエストを送信し、現在のページをリロードすることを意味します) を防ぎます。

検証は HTML5 ブラウザーの検証には複雑すぎるため、データが無効な場合にフォームの送信を防ぐためにアクセスする必要があります。私はこれにちょっと立ち往生しています。これは簡単に解決できる問題のように思えますが、これまでのところ、適切な解決策を回避できました。他の誰かがこの問題を解決しましたか、それとも明らかな何かが欠けていますか?

問題を実証するために、単純化された検証プランカーを作成しました。

http://plnkr.co/edit/p83VEFwJVbRjOoggfNpb?p=preview

4

1 に答える 1

0

これは少しハックな感じがしますが、AngularJS のソリューションがさらに見つかるまで、少し jQuery を振りかけました。

  $("#billingForm").submit(function(e){
    var valid = $scope.billingForm.$valid;
    if (valid) {
      return true;
    }
    else {
      e.preventDefault();
      return false;
    }
  });
于 2017-01-06T21:29:58.210 に答える