8 Example(s) of Ng-Submit


Description :

Ng-Submit-1


Ng-Submit Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
        <b>Name List</b>
            <ul class="unstyled">
                <li ng-repeat="todo in arrs">
                    <span class="done-{{todo.done}}">{{todo.text}}</span>
                </li>
            </ul>
            <form ng-submit="addRecords()">
                    <input type="text" ng-model="name" class="form-control" placeholder="add name here"><br />
                    <input class="btn btn-primary" type="submit" value="add">
            </form>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.arrs = [{ text: "John", done: false }, { text: "Kim", done: false }];
        $scope.addRecords = function () {
            $scope.arrs.push({ text: $scope.name, done: false });
            $scope.name = "";
        }
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-2


Ng-Submit Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <form name="emailForm" ng-submit="addMail()">
                <label>
                    Email:
                    <input type="email" ng-model="email" class="form-control" placeholder="Email"><br />
                    <input ng-disabled="emailForm.$invalid" class="btn btn-primary" type="submit" value="Submit">
                </label>
                <pre>{{showMail}}</pre>
            </form>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.addMail = function () {
            $scope.showMail = $scope.email;
            $scope.email = "";
        }
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-3


Ng-Submit Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    .error {
        color: maroon;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Registration form.</h3>
            <form name="frmRegister" ng-submit="register();" novalidate>
                <div>
                    First Name: <input name="first_name" class="form-control" type="text" ng-model="firstName" required />
                    <span class="error" ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
                </div>
                <div>
                    Last Name: <input name="last_name" class="form-control" type="text" ng-model="lastName" required />
                    <span class="error" ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
                </div>
                <div>
                    Email: <input name="email" class="form-control" type="email" ng-model="email" required />
                    <span class="error" ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
                    <span class="error" ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
                </div><br />
                <input type="submit" value="Save" class="btn btn-default" ng-disabled="frmRegister.$invalid" />
                <span ng-show="registered"><br />YOU ARE SUCCESSFULLY REGISTERED.</span>
            </form>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.register = function () {
            $scope.registered = true;
        }
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-4


Ng-Submit Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Registration form.</h3>
            <form name="editForm" ng-submit="save(this)" novalidate>
                <div class="form-group">
                    <label for="name">Your Email </label>
                    <input type="email" name="email" data-ng-model="email" class="form-control" required />
                    <span>{{errorMsg}}</span>  
                </div>
                <input type="submit" class="btn btn-default" value="Submit">
            </form>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.save = function ($this) {
            if ($this.editForm.email.$error.required) {
                $scope.errorMsg = "This field is required";
            }
            else if ($this.editForm.$invalid) {
                $scope.errorMsg = "Email is not valid";
            }
            else {
                $scope.errorMsg = "";
                alert("Form is valid.");
            }
        }
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-5


Ng-Submit Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
    .ng-invalid {
        border: 1px solid red;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Form</h3>
            <form style="border:none" name="register" ng-submit="save(this)" novalidate ng-class="{true:'submitted'}[submitted]">
                <label>Name: <input type="text" class="form-control" ng-model="user.username" required></label> <br />
                <label>Email: <input type="email" class="form-control" ng-model="user.email"></label><br />
                <input class="btn btn-default" type="submit">
            </form>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.save = function ($this) {
            if ($this.register.$invalid)
                alert("Form is not valid!");
            else
                return;
        };
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-6


Ng-Submit Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Form</h3>
            <form name="editForm" ng-submit="insert()">
                <input type="text" ng-model="pushObj" class="form-control" required><br />
                <input class="btn btn-default" type="submit" ng-disabled="editForm.$invalid" value="insert">
            </form>
            <br />
            <form ng-submit="retrieve()">
                <input class="btn btn-primary" type="submit" value="retrieve">
            </form><br />
            <pre>
            output : <b>{{Arr3}}</b><br>
            stack 1 (from newest to oldest): <b>{{Arr1}}</b><br>
            stack 2 (from oldest to newest): <b>{{Arr2}}</b></pre>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Arr1 = [];
        $scope.Arr2 = [];
        $scope.Arr3 = [];
        var count = 0;
        $scope.insert = function () {
            $scope.Arr1.length == 0 ? $scope.Arr1.push($scope.pushObj) : $scope.Arr2.push($scope.pushObj);
            $scope.pushObj = "";
        };
        $scope.retrieve = function () {
            if ($scope.Arr1.length != 0 || $scope.Arr2.length != 0) {
                count == 0 ? arr3 = $scope.Arr1.splice(0, 1) : arr3 = $scope.Arr2.splice($scope.Arr2.length - count, 1);
                $scope.Arr3.push(arr3[0]);
                count++;
            };
        };
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-7


Ng-Submit Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Add Rows</h3>
            <form ng-submit="save()">
                <div ng-repeat="row in list">
                    <input type="text" class="form-control" ng-model="row.text" />
                </div><br />
                <input type="button" class="btn btn-primary" ng-click="list.push({})" value="Add Row" /><button class="btn btn-default">Submit</button>
            </form>
            <br>
            <pre ng-show="isShow">list={{savedData}}</pre>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.list = [{ text: "LearnIt" }];
        $scope.save = function () {
            $scope.isShow = true;
            $scope.savedData = angular.copy($scope.list);
        };
    }]);
</script>
</body>
</html>

Output

Description :

Ng-Submit-8


Ng-Submit Example - 8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="ExampleController">
        <div class="container">
            <h3>Login</h3>
            <form name="editForm" ng-submit="login()" ng-hide="isShow">
                User Name: <input type="text" ng-model="records.userName" required class="form-control" />
                Password: <input type="password" ng-model="records.password" required class="form-control" /><br />
                <button class="btn btn-primary" ng-disabled="editForm.$invalid">Login</button>
            </form>
            <br>
            <pre ng-show="isShow"><h4>Welcome <b>{{name}}</b> You are successfully login</h4></pre>
            <input ng-show="isShow" class="btn btn-default" type="button" value="Logout" ng-click="isShow=false" />
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.records = {
            userName: "",
            password: ""
        };
        $scope.login = function () {
            $scope.isShow = true;
            $scope.name = $scope.records.userName;
            $scope.records = {
                userName: "",
                password: ""
            }
        };
    }]);
</script>
</body>
</html>

Output