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

Last Reply 2 months ago By skp

Posted 2 months ago

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");
            }

 

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 months ago

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