Introduction:

In this article we will learn how to Use ng-submit directive in AngularJS or what is ng-submit directive in AngularJS or how to use ng-submit directive in AngularJS or how to submit form using ng-submit directive in AngularJS with example

Description:

In AngularJS ng-submit directive specifies a function to be executed when the form is submitted. If you don't use the ng-submit directive in the form then it will not be submitted.

It is supported by <form> element.

Let’s see an example of  ng-submit directive in AngularJS

1.    Submit.cshtml

@{
    Layout = null;
}
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Submit</title>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
 
    <script>
        var SubmitApp = angular.module('MyApp', []);
        SubmitApp.controller("NgSubmitController", function ($scope, SubmitService) {
            $scope.SubmitLogin = function () {
                var data = {
                    userName: $scope.userName,
                    password: $scope.password
                };
                var SendData = SubmitService.Login(data);
 
                SendData.then(function (msg) {                   
                    if (msg.data.message == "success") {
                        window.location.href = "/Home/Index";
                    }
                    else {
                        $scope.msg = "Record submited not successfully !";
                    }
 
 
                });
            }
        });
        SubmitApp.service("SubmitService", function ($http) {
            this.Login = function (data) {
                var response = $http({
                    method: "post",
                    url: "/Account/Submit",
                    data: JSON.stringify(data),
                    dataType: "json"
                });
                return response;
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="NgSubmitController">
        <form ng-submit="SubmitLogin()">
            <table>
                <tr><th colspan="2">Login</th></tr>
                <tr>
                    <td>Username: </td>
                    <td>
                        <input type="text" name="txtLogin"
                               ng-model="userName" placeholder="Enter username" />
                    </td>
                </tr>
                <tr>
                    <td>Password: </td>
                    <td>
                        <input type="password" name="txtPassword"
                               ng-model="password" placeholder="Enter password" />
                    </td>
                </tr>
                <tr><td>&nbsp;</td><td><input type="submit" value="Submit" /></td></tr>
            </table>
        </form>       
    </div>
</body>
</html>

 

2.    AccountController.cs

using Accounts.Data;
using Accounts.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Accounts.Controllers
{
    public class AccountController : Controller
    {
 
 
        public ActionResult Submit()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Submit(User data)
        {
            // write your logic here......
            var Username = data.userName;
            var password = data.password;
            return Json(new { message = "success" }, JsonRequestBehavior.AllowGet);
        }
 
    }
 
    public class User
    {
        public string userName { get; set; }
        public string password { get; set; }
    }
}

 

when above code will run on the browser it will  look like:

 Use of AngularJS ng-submit Directive

 When we entered username and password and click on submit button then form submitted.

Use of AngularJS ng-submit Directive


In above HTML block, notice the ng-submit directive whose value is set to "SubmitLogin()" function declared in the controller. Two text box with Username and Passwod is set with its respective ng-model.

When Submit button is clicked, because of its type="submit", it submits the current form but ng-submit directive prevents it from submitting to the form and instead executes the function assigned in it.

SubmitLogin()” function call service function “Login()” that send the data to mvc controller action “Submit()”.

I hope this article will help to you.

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like