All geek questions in one place

How to apply validation in angular js without form tag?

I have a div in which I do not use the form tag and do not submit the form to the ng-click button, but how can I apply verification of the data submitted to angulrjs.

<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()">Submit</button> </div>
+6
source share
2 answers

You can use the "ng-form" directive if you really do not 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

+15
source

You can 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
source

Source: https://habr.com/ru/post/978273/

More articles:


All Articles