How can i validate form fields based on button click?
Question
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 {{$index}}</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>
1 answers
solution1
2 ACCPTED 2021-03-01 09:00:09
You should separate forms, in order to have the control of each one of them.
Create an array variable $scope.forms = []; , and use $index to set each form's name:
<form name="forms[{{$index}}]">
Now you can control each form using $index:
<button ng-click="myFunc($index)">check {{$index}}</button>
and use it to show errors or anything else:
$scope.myFunc = function(formIndex) {
console.log(formIndex);
console.log($scope.forms[formIndex]);
};
$setSubmitted() can be used also for different cases.
demo If you need further help please let me know
EDIT
When 'check all' is clicked, one approach would be to set all forms as submitted and show the field errors:
$scope.checkall = function(form) {
$scope.forms[0].$setSubmitted();
$scope.forms[1].$setSubmitted();
console.log('form 1 is valid: ', $scope.forms[0].$valid);
console.log('form 1 username field', $scope.forms[1].username);
console.log('form 2 is valid: ', $scope.forms[1].$valid);
};
You can access each form like this (or with a loop over $scope.forms if you need a dynamic approach):
$scope.forms[0]
or a form field and its properties:
$scope.forms[1].username
in order to show the error message after the 'check all' button clicked, I changed the condition of each field like this:
ng-show="forms[$index].$submitted"
check the updated demo here: DEMO
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.