Disable submit button for multiple forms until user has input all the data when ng-click is used for button?

Question

So I have a form that takes data and controller accesses it but I'm getting an error if the user clicks on the button without filling all the fields, so I want to disable the Proceed button until user has input all the fields. How do I achieve this? The fields are in div and I tried wrapping all the divs below including the button in a form but couldn't make it work. I have seen other examples like this but they do not use ng-click.

  <form novalidate name="passengerForm">
                        <div class="col-md-12">
                            <div class="booking-details-container">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4 class="text-primary">
                                            <strong>Contact Person Details</strong>
                                        </h4>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="">Contact Name <font color="red">*</font><input type="text"
                                            ng-model="contactName" class="form-control-sm">
                                        </label>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Email <input type="email"
                                            ng-model="contactEmail" class="form-control-sm">
                                        </label>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="">Number  <font color="red">*</font><input type="text" id="contactNo" ng-model="contactNumber" 
                                            class="form-control-sm">
                                        </label>
                                    </div>

                                </div>
                                <div class="divider-h"></div>


                                <div data-ng-repeat="passenger in passengerList track by $index">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4 class="text-primary">
                                                <strong>Passenger Details</strong>
                                            </h4>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="">Type  <font color="red">*</font><select type="text"
                                                ng-model="passenger.paxType" class="form-control-sm" ng-disabled="true">
                                                    <option value="ADULT" ng-selected="passenger.paxType == 'ADULT'" >Adult</option>
                                                    <option value="CHILD" ng-selected="passenger.paxType == 'CHILD'">Child</option>
                                                    <!-- <option value="INFANT">Infant</option> -->
                                            </select>
                                            </label>
                                        </div>

                                        <div class="col-md-3">
                                            <label for="">Title  <font color="red">*</font><select type="text"
                                                ng-model="passenger.title" class="form-control-sm">
                                                    <option value="Mister">Mr.</option>
                                                    <option value="Miss">Ms.</option>
                                                    <option value="Mrs" ng-show="passenger.paxType == 'ADULT' " >Mrs.</option>
                                            </select>
                                            </label>

                                        </div>

                                        <div class="col-md-3">
                                            <label for="">First Name  <font color="red">*</font><input type="text"
                                                ng-model="passenger.firstName" class="form-control-sm"></label><br>

                                        </div>
                                        <div class="col-md-3">
                                            <label for="">Last Name  <font color="red">*</font><input type="text"
                                                ng-model="passenger.lastName" class="form-control-sm"></label>
                                        </div>

                                        <div class="clearfix"></div>

                                        <div class="col-md-4">
                                            <label for="">Nationality  <font color="red">*</font><select type="text"
                                                ng-model="passenger.nationality" class="form-control-sm">
                                                    <option value="" selected disabled>Select
                                                        Nationality</option>
                                                        <option value="NP">Nepalese</option>
                                                        <option value="IN">Indian</option>

                                                    <%-- <c:forEach var="nationality" items="${nationality}">
                                                        <option value="NP">${nationality}</option>
                                                    </c:forEach> --%>
                                            </select>
                                            </label>
                                        </div>

                                        <div class="col-md-8">
                                            <label for="">Remarks <input type="text"
                                                ng-model="passenger.paxRemarks" class="form-control-sm">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="divider-h"></div>



                                </div>
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <!-- <button class="btn btn-xs btn-default">+ Add Passenger</button> -->
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>






                        <div class="col-md-2 pull-right" style="margin-top: 20px;">
                            <button ng-disabled="invalid" type="button" class="btn btn-primary btn-block" ng-click="proceedARS()">{{loadingButtonProceed}}</button>
                        </div>

        </form>

Controller.js:

My controller.js is actually thousands of lines of code, I have just included the relevant parts:

 $scope.$watch('passengerForm.$invalid',function(x,y){ $scope.invalid = $scope.passengerForm.$invalid; }, true)


    $scope.proceedARS = function () {
        $scope.ARSMessage = '';
        if ($scope.contactName === undefined || $scope.contactName === null || $scope.contactName === "") {
            $scope.ARSMessage = 'Please fill all the required fields';
            return;
        }

        if ($scope.contactEmail === undefined || $scope.contactEmail === null || $scope.contactEmail === "") {
            $scope.contactEmail = "";
        }

        if ($scope.contactNumber === undefined || $scope.contactNumber === null || $scope.contactNumber === "") {
            $scope.ARSMessage = 'Please fill all the required fields';
            return;
        }

        if ($scope.contactNumber.length != 9 && $scope.contactNumber.length != 10) {
            $scope.ARSMessage = 'Contact Number Length Invalid';
            return;
        }

        if ($scope.selectedOutbound == undefined || $scope.selectedOutbound == "" || $scope.selectedOutbound == null) {
            $scope.ARSMessage = "Please select one of the flights for departure";
            return;
        }

        if ($scope.flightAvailability.tripType == 'R') {
            if ($scope.selectedInbound == undefined || $scope.selectedInbound == "" || $scope.selectedInbound == null) {
                $scope.ARSMessage = "Please select one of the flights for arrival";
                return;
            }
        }
        $scope.loadingFunction();

Possible duplicate of [Disable submit button when form invalid with AngularJS](https://stackoverflow.com/questions/15300067/disable-submit-button-when-form-invalid-with-angularjs) — Kaustubh Khare, Apr 12 '18 at 05:26
@KaustubhKhare But that example doesn't use ng-click, the button doesn't get disabled in my case because of ng-click. Or can I just use form submit instead of ng-click?? — Bikal Nepal, Apr 12 '18 at 05:32
You can use `ng-click` or `form submit`. When the button is disabled then either will not trigger. — Kaustubh Khare, Apr 12 '18 at 05:37
@KaustubhKhare I tried using ng-disabled as well. For some weird reason it's not working! I named the form name="passengerForm" and in the button tag did ng-disabled="passengerForm.$invalid". But it is still not working. The button can still be clicked. — Bikal Nepal, Apr 12 '18 at 06:14

poojan mehta PM · Answer 1 · 2018-04-12T06:26:50.330

0

Try this

<form name="myForm">
    <input type="text" name="name" ng-model="name" required />
    <button ng-disabled="{{ myForm.$invalid }}">Save</button>
</form>

edited Apr 12 '18 at 06:26

answered Apr 12 '18 at 05:38

poojan mehta PM

65
11

That simply makes it disabled all the time, even if I fill out all the fields! – Bikal Nepal Apr 12 '18 at 06:19

Ryan Jeric · Answer 2 · 2018-04-12T06:56:30.213

0

Try this

function Controller($scope) {
    $scope.save = function(user) {
    console.log(user);
   $scope.user = user;
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<html ng-app>
<div ng-app="demo1">
  <div ng-controller="Controller">
    <form novalidate name="myForm">
      <input type="text" name="name" ng-model="data.name" required />
      <input type="text" name="lastname" ng-model="data.lastname" required />
      <button type="button" ng-disabled="myForm.$invalid" 
      ng-click="save(data)">Save</button>
    </form>
    {{user}}
  </div>
</div>
</html>

edited Apr 12 '18 at 06:56

answered Apr 12 '18 at 06:20

Ryan Jeric

380
2
9

But I have got multiple fields and multiple data, do I create each $watch for each field? – Bikal Nepal Apr 12 '18 at 06:33
I updated it again you can directly use it on ng-disabled myForm.$invalid – Ryan Jeric Apr 12 '18 at 06:57
@Bik add required into your inputs – Ryan Jeric Apr 12 '18 at 07:08
Even after putting required it's not working, It just shows the button all the time; If I do "disabled" instead of "ng-disabled" it gets disabled otherwise nothing seems to work. – Bikal Nepal Apr 12 '18 at 08:52

Kaustubh Khare · Accepted Answer · 2018-04-12T09:24:01.227

0

Try This,

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="">

<p>Try writing in the input field:</p>

<form novalidate name="myForm">
<label>First Name</label>
<input name="fname" ng-model="fname" required>
<div ng-show="myForm.fname.$valid === false">Please enter first name</div>
<div></div>
<label>Last Name</label>

<input name="lname" ng-model="lname" required>          
 <div ng-show="myForm.lname.$valid === false">Please enter last name</div>
<button type="submit" ng-disabled="!myForm.$valid" >save</button>
</form>


   

</body>

I have created plunker and its working fine,

Add required attribute to all required fields.

<input type="text" ng-model="contactName" class="form-control-sm" required>

edited Apr 12 '18 at 09:24

answered Apr 12 '18 at 06:53

Kaustubh Khare

3,280
2
32
48

It seems to work when I do it in a separate file in Sublime, but it doesn't work in my project which is using Eclipse IDE and Java in the backend. – Bikal Nepal Apr 12 '18 at 08:59
Could add your code to code snippet? I can try to run it and check issue. – Kaustubh Khare Apr 12 '18 at 09:02
Never mind, I made it work finally! I don't know what it was but I restarted eclipse and the same thing worked! Thank you :) – Bikal Nepal Apr 12 '18 at 09:25

Disable submit button for multiple forms until user has input all the data when ng-click is used for button?

3 Answers3