Simulating a submit and validation to a separate form on AngularJS

Question

Simulating a submit and validation to a separate form on AngularJS

How to simulate submit plus validation on a form whose button is outside of it?

It can be done with this:

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();
        });
    };
});

But I wanted to stay away from that approach, it's very kludgy, it triggers a validation+submit by simulating a submit on first form by clicking its hidden submit button

Is there an API on AngularJS (or even plain javascript) that will let me achieve my objective? I.e. without using any hidden submit button

javascript
angularjs

Answer 1

You're not thinking very Angular here. No one is forcing you to work with form ng-submit. Just use 2 buttons each with their own ng-click="runThisFunction()" or simply use the same function and pass along a parameter. i.e:

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

and

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

Then in your controller:

$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);
    }
}

This will work whether or not you're in the scope of the form, but you need to be in the scope of the controller.