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 — Kaustubh Khare
– Kaustubh Khare, Commented Apr 12, 2018 at 5: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
– Bikal Nepal, Commented Apr 12, 2018 at 5:32
You can use ng-click or form submit. When the button is disabled then either will not trigger. — Kaustubh Khare
– Kaustubh Khare, Commented Apr 12, 2018 at 5: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
– Bikal Nepal, Commented Apr 12, 2018 at 6:14

Kaustubh Khare · Accepted Answer · 2018-04-12 09:24:01Z

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, 2018 at 9:24

answered Apr 12, 2018 at 6:53

Kaustubh Khare

3,5203 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bikal Nepal Over a year ago

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.

Kaustubh Khare Over a year ago

Could add your code to code snippet? I can try to run it and check issue.

Bikal Nepal Over a year ago

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 :)

poojan mehta PM · Accepted Answer · 2018-04-12 06:26:50Z

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, 2018 at 6:26

answered Apr 12, 2018 at 5:38

poojan mehta PM

751 silver badge12 bronze badges

1 Comment

Bikal Nepal Over a year ago

That simply makes it disabled all the time, even if I fill out all the fields!

Ryan Jeric · Accepted Answer · 2018-04-12 06:56:30Z

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, 2018 at 6:56

answered Apr 12, 2018 at 6:20

Ryan Jeric

3802 silver badges9 bronze badges

4 Comments

Bikal Nepal Over a year ago

But I have got multiple fields and multiple data, do I create each $watch for each field?

Ryan Jeric Over a year ago

I updated it again you can directly use it on ng-disabled myForm.$invalid

Ryan Jeric Over a year ago

@Bik add required into your inputs <input name="sample" ng-model="sample" required>

Bikal Nepal Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related