コントローラからフォーム送信をトリガできますか？

Question

コントローラ内から従来のフォーム送信をしたいと思います。このシナリオでは、Webサーバー上のルートをヒットしてレスポンスにリダイレクトする必要があります。これはHTML形式の通常のフォームで行うことができますが、送信ボタンが押されたときにそのフィールドでいくつかの検証を行いたい検証が失敗した場合、私はそのルートを実行したくありません。

私はng-validについて認識していますが、ボタンが押されたときに検証が行われるようにしたいだけです。

コントローラ内からフォーム送信を条件付きで行う方法はありますか？

Answer 1

フォームにng-submitディレクティブを使用しようとしましたか？検証後にtrue/falseを返すことがあります。

コントローラ

app.controller('MainCtrl', ['$location', function($scope, $location) { 
    $scope.submit = function(user) { 
    var isvalid = true; 
    // validation 
    if (isvalid) { 
     $http.get('api/check_something', {}).then(function(result) { 
      $location.path(result.data); 
     }); 
     return true; 
    } 
    return false; //failed 
    } 
}); 

のHTML（あなたはaction属性を持っていなければなりません）

<form name="formuser" ng-submit="submit(user)"> 
    <input type="text" ng-model="user.firstname" /> 
    <input type="text" ng-model="user.lastname" /> 
    <button type="submit">Submit</button> 
</form> 

Answer 2

どのようにフォームが有効になるまで、送信ボタンを無効にちょうど右について：

<button type="submit" ng-disabled="form.$invalid">Submit</button> 

を

私が持っていたこの同様の質問を見てみましょう： AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

Answer 3

FormControllerに送信メソッドを追加できます。私はそうでした：

<form ng-form-commit action="/" name='payForm' method="post" target="_top"> 
    <input type="hidden" name="currency_code" value="USD"> 
    <button type='button' ng-click='save(payForm)'>buy</button> 
</form> 

.directive("ngFormCommit", [function(){ 
    return { 
     require:"form", 
     link: function($scope, $el, $attr, $form) { 
      $form.commit = function() { 
       $el[0].submit(); 
      }; 
     } 
    }; 
}]) 

.controller("AwesomeCtrl", ["$scope", function($scope){ 
    $scope.save = function($form) { 
    if ($form.$valid) { 
     $form.commit(); 
    } 
    }; 
}]) 

Answer 4

これは「角度のない」方法ですが、vanilla javascriptを使用してフォームを送信できます。たとえば、フォームにIDを与えると行うことができます。

document.getElementById('myForm').submit()

をしたり、送信ボタンを持っている場合、あなたはそれをクリックすることができます

document.getElementById('myForm-submit').click()

は私が最初のものはなかったことがわかりましたデータバインディングを保持する（私は、Angularの代替方法を持たないJQueryウィジェットを使ってプロジェクトでそれを使用していた）が、2番目のバインディングはバインディングを保持していた。これは、JQueryウィジェットがどのように書かれているかと関係していると思います。

あなたがここにバニラJSでフォームをトリガーについての詳細を見ることができます：ReklatsMastersの答え@から拡大

How to submit a form using javascript?

Answer 5

、フォームを提出する前に、値を変更したい場合は、あなたがそのように行うことができます...

<form ng-form-commit action="/" name='payForm' method="post" target="_top"> 
    <input type="hidden" id="currency_code" name="currency_code" value="USD"> 
    <button type='button' ng-click='save('GBP', payForm)'>buy</button> 
</form> 

.directive("ngFormCommit", [function(){ 
    return { 
     require:"form", 
     link: function($scope, $el, $attr, $form) { 
      $form.commit = function($newCurrency) { 
       $el[0].querySelector('#currency_code').value = $newCurrency; 
       $el[0].submit(); 
      }; 
     } 
    }; 
}]) 

.controller("AwesomeCtrl", ["$scope", function($scope){ 
    $scope.save = function($newCurrency, $form) { 
    if ($form.$valid) { 
     $form.commit($newCurrency); 
    } 
    }; 
}])