如何根据按钮单击验证表单字段？
Posted
技术标签:
【中文标题】如何根据按钮单击验证表单字段？【英文标题】：How can i validate form fields based on button click? 【发布时间】：2021-05-23 09:32:14 【问题描述】：我有 3 个按钮。 2 在 ng-repeat 内部，1 在 ng-repeat 外部，所以 如果用户单击这些按钮，我想显示必填字段警报。
如果用户点击检查 0，我只需要验证第一个对象，如果缺少任何表单数据值，我必须提醒用户“this(username) is a required field.
如果用户单击检查 1 按钮，我只需要验证第二个对象，并且如果缺少任何表单数据值，我必须提醒用户“this(username) is a required field”。
如果用户单击检查所有按钮，我必须检查两个对象，如果两个对象中缺少任何字段，我必须用对象索引提醒字段名称。
如果用户单击检查所有按钮和检查按钮，我如何显示必填字段，请帮助我
Demo
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>【问题讨论】：
这能回答你的问题吗？ How to add custom validation to an AngularJS form? 没有。我必须验证用户是否点击了按钮，并根据我们必须验证对象的按钮。 【参考方案1】：您应该分开表单，以便控制每个表单。
创建一个数组变量$scope.forms = [];，并使用$index设置每个表单的名称：
<form name="forms[$index]">
现在您可以使用 $index 控制每个表单：
<button ng-click="myFunc($index)">check $index</button>
并使用它来显示错误或其他任何内容：
$scope.myFunc = function(formIndex)
console.log(formIndex);
console.log($scope.forms[formIndex]);
;
$setSubmitted() 也可以用于不同的情况。
demo 如果您需要进一步的帮助，请告诉我
编辑
当点击“检查所有”时，一种方法是将所有表单设置为已提交并显示字段错误：
$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);
;
您可以像这样访问每个表单（如果您需要动态方法，也可以使用 $scope.forms 循环）：
$scope.forms[0]
或表单域及其属性：
$scope.forms[1].username
为了在单击“检查全部”按钮后显示错误消息，我将每个字段的条件更改如下：
ng-show="forms[$index].$submitted"
在此处查看更新的演示：DEMO
【讨论】：
如果我点击检查所有按钮如何获取表单信息。 我们必须动态检查表格。这里是硬编码的。我认为根据索引我们可以验证表格吗？ 为什么我没有得到 ng-message 所需的验证。如果我从某个字段中删除值，请查看我的演示，您将收到类似 This field is required 的消息。 你可以使用$submitted或$dirty，这里是像你这样的方法，显示输入更改后的错误DEMO以上是关于如何根据按钮单击验证表单字段？的主要内容，如果未能解决你的问题，请参考以下文章