How to submit a form with OnsenUI and AngularJS?

Question

How to submit a form with OnsenUI and AngularJS?

Navigation

#1 by (1 votes)

1

How do I make a submit with the Onsen UI + AngularJS ?

I have the following ons-page :

<ons-page ng-controller="LoginController">
    <ons-toolbar>
        <div class="center">Acesso ao Sistema</div>
    </ons-toolbar>

    <form action="@Url.Action("Login", "Account")" method="post" id="loginForm" 
      class="login-form">
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "")

        @Html.EditorFor(m => m.Email, new { htmlAttributes = new { 
            @class = "text-input--underbar", 
            placeholder = "E-mail", 
            autofocus = "autofocus" 
        } })
        @Html.ValidationMessageFor(m => m.Email)

        @Html.PasswordFor(m => m.Password, new { 
            @class = "text-input--underbar", 
            placeholder = "Senha" 
        })
        @Html.ValidationMessageFor(m => m.Password)
        <br><br>
        <ons-button modifier="large" class="login-button">Login</ons-button>
        <br><br>
        <ons-button modifier="quiet" class="forgot-password">
            Esqueceu sua senha?
        </ons-button>
    </form>
</ons-page>

@section scripts {
    <script src="~/Static/js/controllers/loginController.js"></script>
}

Plugins render in the required order:

<script src="/Static/vendor/angular/angular.min.js"></script>
<script src="/Static/vendor/onsenui/js/onsenui.min.js"></script>    
<script src="/Static/js/controllers/loginController.js"></script>

Content from loginController.js :

(function () {
    var module = ons.bootstrap("loginModule", ["onsen"]);
    //module.controller("AppController", function ($scope) { });
    //module.controller("MainController", function ($scope) { });
    module.controller("LoginController", function ($scope) { });
})();

angularjs asp.net-mvc onsen

asked by anonymous 05.08.2015 / 02:48

1 answer

@Size, using hibernate validator, acknowledges error in value that should pass validation Update mysql table with image

score 1 · Accepted Answer

OnsenUI does not have a submit button, but you can mask it:

Add a name to your form:

<form action="@Url.Action("Login", "Account")" method="post"
id="loginForm" class="login-form" name="loginForm">

Change your controller to:

module.controller("LoginController", function ($scope) { 
    $scope.login = function() {
        $scope.loginForm.submit();
    }
});

And the login button:

<ons-button modifier="large" class="login-button" ng-click="login()">Login</ons-button>