J'ai donc un formulaire qui prend les données et le contrôleur y accède mais j'obtiens une erreur si l'utilisateur clique sur le bouton sans remplir tous les champs, donc je veux désactiver le bouton Continuer jusqu'à ce que l'utilisateur ait entré tous les champs. Comment puis-je y parvenir? Les champs sont en div et j'ai essayé d'encapsuler tous les divs ci-dessous, y compris le bouton dans un formulaire, mais je n'ai pas pu le faire fonctionner. J'ai vu d'autres exemples comme celui-ci mais ils n'utilisent pas 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:

Mon controller.js est en fait des milliers de lignes de code, je viens d'inclure les parties pertinentes:

 $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();
0
Bikal Nepal 12 avril 2018 à 08:25

3 réponses

Meilleure réponse

Essaye ça,

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

J'ai créé le plunker et son bon fonctionnement,

Ajoutez l'attribut required à tous les champs obligatoires.

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

0
Kaustubh Khare 12 avril 2018 à 09:24

Essaye ça

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>
0
Ryan Jeric 12 avril 2018 à 06:56

Essaye ça

<form name="myForm">
    <input type="text" name="name" ng-model="name" required />
    <button ng-disabled="{{ myForm.$invalid }}">Save</button>
</form>
0
poojan mehta PM 12 avril 2018 à 06:26