beginumbracoform plus ng submit - API Questions

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Nathan Woulfe 447 posts 1665 karma points MVP 5x hq c-trib

Apr 08, 2015 @ 01:10
0

BeginUmbracoForm + ng-submit
Is it possible to submit an MvcForm using AngularJS? I'm rendering the form like so:
```
@using (Html.BeginUmbracoForm("Action", "Controller", FormMethod.Post,
    new { name = "enquiryForm", ng_controller = "FormCtrl", novalidate = true, ng_submit = "submitForm()" } ))
{
    ... // form fields
    @Html.LabelFor(m => m.Message)
    @Html.TextAreaFor(m => m.Message, new { ng_model = "formData.message", required = true })
}
```
Controller is simple, but will ultimately include a service reference to post the form:
```
.controller('FormCtrl', ['$scope', function ($scope) {

    $scope.formData = {};
    $scope.submitForm = function () {
        console.table($scope.formData);
    };
} ]);
```
At the moment, the submitForm method is not called. Angular knows about the form as the validation classes are all set correctly.

I want to submit using AngularJs and fallback to the browser POST if javascript is not available.
Copy Link
Peter Kongyik 28 posts 170 karma points

Apr 08, 2015 @ 01:35
0
Hi!

ng-form documentation: https://docs.angularjs.org/api/ng/directive/ngSubmit

I think since your form has the "action" attribute your directive is not called. However you could submit your form if you subscribed to your button's click event and do: angular.element("#formId").submit() or with jquery: $("#formId").submit(); Of course the default event needs to get prevented.

So as a demonstration I'd use jQuery:
```
$(".submit-button").on("click", function (event) {
    // prevent the default event - form won't get submited unless you manually do
    event.preventDefault();

    // do whatever you need before submitting

    // then submit
    $("#formId").submit();
});
```
cheers, Peter
Copy Link
Nathan Woulfe 447 posts 1665 karma points MVP 5x hq c-trib

Apr 08, 2015 @ 01:56

0

Thanks Peter, not sure how I missed that given it's the first freaking line of the Angular docs...

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

BeginUmbracoForm + ng-submit