4

ボタンがフォームの外にあるフォームで送信と検証をシミュレートする方法は?

これを行うことができます：

HTML:

<div ng-controller="MyCtrl">
    <form ng-submit="onSubmitted()">

    Header inputs:
        <input type="name" ng-model="sample" required/>
        <input type="name" ng-model="sampleX" required/>

        <div style="visibility: hidden">
        <input type="submit" id="clcikMe" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
        </div>
    </form>

    <hr/>

    Some other form here. Think line items

    <hr />
    <a class="btn" linked="clcikMe">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>



</div>

Javascript:

var app = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.onSubmitted = function() {
        alert('submitted!');
    };

}
app.directive("linked",function(){
    return function (scope, element, attrs) {
        var id = attrs["linked"];
        element.on("click",function(){
            document.getElementById(id).click();
        });
    };
});

しかし、私はそのアプローチから離れたいと思っていました。それは非常に厄介です。非表示の送信ボタンをクリックして最初のフォームで送信をシミュレートすることにより、検証+送信をトリガーします

目的を達成できる AngularJS (またはプレーンな JavaScript) の API はありますか? つまり、非表示の送信ボタンを使用せずに

4

1 に答える 1

0

ここではAngularについてあまり考えていません。フォーム ng-submit での作業を強制する人はいません。それぞれ独自のボタンを 2 つng-click="runThisFunction()"使用するか、同じ機能を使用してパラメーターを渡すだけです。すなわち:

<button ng-click="submitForm(true)">Validate + Submit</button>

と

<button ng-click="submitForm(false)">Only Validate</button>

次に、コントローラーで：

$scope.submitForm = function(shouldSubmit) {
    //run validation here.
    //either using $scope.form.name.$valid or ng-model $scope variable
    var dataGood = false;
    if ($scope.sample === "goodData" && $scope.sample === "alsoGoodData" ) {
        //data is good
        dataGood = true;
        //alert user that data is good!
        alert('good job, your data is great!');
    }
    else {
    //data is bad
         alert (' data bad, dear padowan');
    }

    if (!shouldSubmit) return;

    //perform $http request to server, or navigate to a different page or whatever
    if (dataGood) {
    //submit data to server and let the party begin
    $http.post('/api/rocknroll/submit', { sample: $scope.sample, sampleX: $scope.sampleX}).then( $scope.handleResponse);
    }
}

これは、フォームのスコープ内にいるかどうかに関係なく機能しますが、コントローラーのスコープ内にいる必要があります。

于 2013-08-25T19:59:05.503 に答える