I have 3 buttons. 2 is inside ng-repeat and one outside ng-repeat so I want to show the required field alert if the user clicks these buttons.
if the user clicks check 0 I have to validate only the first object and if any form data value missing I have to alert the user like 'this(username) is a required field.
if the user clicks the check 1 button I have to validate only the second object and if any form data value missing I have to alert the user like 'this(username) is a required field.
and if the user click check all button I have to check both the objects and if any field missing in both the objects I have to alert the field name with the object index.
How can I show the required field if the user clicks the check all button and check button please help me
var app = angular.module("app", ['ngMessages']);
app.controller("myCtrl", function($scope) {
$scope.users = [
{
"inputName":"aj",
"inputPassword":"1234",
"inputEmail":"aj@g.in",
},{
"inputName":"gj",
"inputPassword":"1234",
"inputEmail":"gj@g.in",
}
];
$scope.myFunc = function(formValidation) {
console.log(formValidation)
};
$scope.checkall = function(formValidation) {
console.log(formValidation)
};
});<body translate="no" >
<button ng-click="checkall(formValidation)">check all</button>
<body ng-app="app" ng-controller="myCtrl" >
<div ng-repeat="user in users">
<script type="text/ng-template" id="generic-messages">
<p ng-message="required">This field is required.</p>
<p ng-message="minlength">This field is too short.</p>
<p ng-message="maxlength">This field is too long.</p>
</script>
<form name="formValidation">
<button ng-click="myFunc(formValidation)">check </button>
<label>Username (Using Dirty)</label>
<input type="text" name="username" ng-model="user.inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
<div ng-messages="formValidation.username.$error" ng-show="formValidation.username.$dirty">
<p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
<p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
<div ng-messages-include="generic-messages"></div>
</div>
<label>Password (Using Touched)</label>
<input type="text" name="userPassword" ng-model="user.inputPassword" ng-minlength="6" ng-maxlength="12" required>
<div ng-messages="formValidation.userPassword.$error" ng-show="formValidation.userPassword.$touched">
<div ng-messages-include="generic-messages"></div>
</div>
<label>Email (Using Dirty)</label>
<input type="email" name="userEmail" ng-model="user.inputEmail" required>
<div ng-messages="formValidation.userEmail.$error" ng-show="formValidation.userEmail.$dirty">
<p ng-message="required">This field is required.</p>
<p ng-message="email">Please enter a valid email address.</p>
</div>
</form>
</div>
</body>from How can i validate form fields based on button click?
No comments:
Post a Comment