Submit data when All TextBox in Table Row has value in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 16, 2019 04:08 AM
Forum: AngularJS
Answer: 2
Views: 8221
Sample Code: Download

How to submit data into database only when the textbox has some value in angularjs.

Here, only the first row data is taken into the database and when the first row textbox data is empty, the remaining textbox data is not getting inserted.

For Eg :

If the textbox value is 0, the data should not get into the database and if the textbox value is 1, 100, etc, the data should get into the database

        <div class="bg-white mb-1">
            <div class="row m-1 p-1" ng-repeat="item in mydata">
                <div class="col-md-1 pull-left airways-info-sect">
                    <span class="fli-code">Serial No</span>
                    <span class="airways-name" style="text-align:center;">{{$index + 1}}</span>
                </div>
                <div class="col-md-4 pull-left airways-info-sect">
                    <span class="fli-code">Part Name</span>
                    <span class="airways-name" style="text-align: left;">{{item.PartName}}</span>
                </div>
                <div class="col-md-2 pull-left airways-info-sect">
                    <span class="fli-code">No Of Pallets</span>
                    <span class="airways-name ">
                        <input type="number" min="0" class="" placeholder="" ng-model="item.num" ng-init="item.num=0" ng-change="calc($index)" required="" style="border:1px solid #333; width:20%; text-align:right" /><i class="mr-3 fa fa-plus-square-o" style="font-size:22px; padding-left:5px; position:absolute;"></i>
                    </span>
                </div>
                <div class="col-md-1 pull-left airways-info-sect"> 
                <span class="fli-code">Pallet Qty</span> 
                    <span class="airways-name" style="text-align:right;">{{item.PalletCapacity}}</span>  
                </div>
                <div class="col-md-1 pull-left airways-info-sect"> 
                    <span class="fli-code">Accept Qty</span> 
                    <span class="airways-name">{{item.Numbers}}</span>  
                </div>
                <div class="col-md-1 pull-left airways-info-sect"> 
                    <span class="fli-code">Issued Qty</span> 
                    <span class="airways-name" style="text-align:right;">{{item.IssuedQty}}</span>  
                </div>
                <div class="col-md-1 pull-left airways-info-sect">
                    <span class="fli-code">Issue Qty</span>
                    <input type="number" class="" placeholder="" ng-model="item.mul" ng-init="item.mul=0" required="" style="border: 1px solid #333; width: 90%; text-align: right" />
                </div>
                <div class="col-md-1 pull-left airways-info-sect">
                <span class="fli-code">Stock</span> 
                    <span class="airways-name" style="text-align:right;">{{item.Stock}}</span>  
                </div>
            </div>
        </div>
        <input type="button" class="btn btn-primary bg-purple my-2 float-right mt-2 border-0" value="{{btntext}}" ng-click="submit()" ng-disabled="isDisabled" data-toggle="modal" data-target="#myModal2">

            if ($scope.mydata[0].mul > 0 && typeof ($scope.plNo) != "undefined") {           
                $http({
                    method: "POST",
                    url: apiUrl + "/api/Warehouse/AddIssueDetails",
                    data: JSON.stringify(issueDetails),
                    dataType: 'json',
                    contentType: 'application/json'
                }).then(function (data, status) {
                });
            } else {
                $window.alert("Please enter some details");
            }

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Jul 17, 2019 08:14 AM
Report

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope, $window) {
            $scope.Items = [
                { Id: 1, Name: "Chai", Quantity: 0 },
                { Id: 2, Name: "Chang", Quantity: 0 }
            ];
            $scope.Submit = function () {
                var isValid = true;
                for (var i = 0; i < $scope.Items.length; i++) {
                    if ($scope.Items[i].Quantity <= 0) {
                        isValid = false;
                        break;
                    }
                }
                if (isValid) {
                    // Call $http post method.
                    $window.alert("Valid");
                }
                else {
                    $window.alert("InValid");
                }
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table border="1" cellpadding="1" cellspacing="1">
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Quantity</td>
        </tr>
        <tr ng-repeat="item in Items">
            <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td><input type="number" ng-model="item.Quantity" /></td>
        </tr>
    </table><br /><br />
    <input type="button"  value="Save" ng-click="Submit()">
</body>
</html>

Demo

skp

0 5

Reply
ANSWER
User: skp
Replied: on Jul 17, 2019 11:37 PM
Report

I have modified the answer according to my requirement, this is the answe for my question

$scope.submit = function () {       
        debugger;
        var a = $scope.mydata.length;       
        for (var i = 0; i < a; i++) {
            var issueDetails = {
                "InvoiceId": $scope.selectedInvoice[0].InvoiceId,
                "IssueDate": $scope.currentdate,
                "PackingListNo": $scope.plNo,
                "DispatchId": $scope.mydata[i].DispatchId,
                "IssueQty": $scope.mydata[i].mul,
                "CreatedBy": $scope.username
            };            
            if ($scope.mydata[i].mul > 0 && typeof ($scope.plNo) != "undefined") {
                $http({
                    method: "POST",
                    url: apiUrl + "/api/Warehouse/AddIssueDetails",
                    data: JSON.stringify(issueDetails),
                    dataType: 'json',
                    contentType: 'application/json'
                }).then(function (data, status) {
                    $scope.issueDetails = "";
                });
            }
            else {
                $window.alert("Please ensure that required fields are entered");
            }
        }
}

Submit data when All TextBox in Table Row has value in AngularJS

Company

Explore

Follow us

Contact Us