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.
我有一个div,其中我没有使用表单标签并在ng-click按钮上提交表单但是如何在AngularJS中应用给定字段的验证。
<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>
2 个解决方案
#1
15
You can use the "ng-form" directive if you really dont want to add a form tag.
如果您真的不想添加表单标记,可以使用“ng-form”指令。
<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>
#2
0
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>
#1
15
You can use the "ng-form" directive if you really dont want to add a form tag.
如果您真的不想添加表单标记,可以使用“ng-form”指令。
<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>
#2
0
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>