how to apply validation in AngularJS without form tag?

后端 未结 2 1523

I have a div in which I am not using the form tag and submit the form on ng-click button but how can I apply the validation of given filed in AngularJS.

<         


        
相关标签:
2条回答
  • 2021-01-18 04:32

    You may try something below,

    var myValidationModule = angular.module('myApp', []);
    
    myValidationModule.controller('AddNewvisaController', function($scope) {
      $scope.visa = {requirement : "", country : "pqrs"}
      
      //initilize to false - it will make sure the disable the submit button 
      $scope.enableSubmitButton = false;
      
      //Do the watch collection - whenever something changed, this will trigger and then do the validation as per the needs - here i validated as not empty - you can do whatever you wish and if everything is fine, then enable the button 
      $scope.$watchCollection(['requirement, country'], function(valueArray) {
        if(valueArray[0] != "" && valueArray[1] != "") {
         $scope.enableSubmitButton = true;
        } else {
          $scope.enableSubmitButton = false;
        }
      })
    })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="myApp">
       <div ng-controller="AddNewvisaController">
       <input type="text" class="form-control" ng-model="visa.requirement">
         <select ng-model="visa.country">
            <option value="1">abc<option>
            <option value="2">xyz<option>
            <option value="3">pqrs<option>
         </select>
       <button type="submit" data-ng-click="submitvisa()" ng-disable="!enableSubmitButton">Submit</button> <!-- introduce the disable directive to make is disable by default and this will acitve if all the required filed had met their validation 
      </div>
    </div>

    0 讨论(0)
  • 2021-01-18 04:37

    You can use the "ng-form" directive if you really dont want to add a form tag.

    <body ng-controller="MainCtrl">
      <div ng-form="myForm">
        <input type="text" required ng-model="user.name" placeholder="Username">
        <button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
      </div>
    </body>
    

    example

    0 讨论(0)
提交回复
热议问题