如何根据按钮单击验证表单字段？

Question

I have 3 buttons.我有 3 个按钮。 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. 2 在 ng-repeat 内部，一个在 ng-repeat 外部，因此如果用户单击这些按钮，我想显示必填字段警报。

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.如果用户单击检查 0，我必须仅验证第一个 object，如果缺少任何表单数据值，我必须提醒用户，例如“this(username) 是必填字段。

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.如果用户单击检查 1 按钮，我只需要验证第二个 object 并且如果缺少任何表单数据值，我必须提醒用户“this(username) 是必填字段。

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.如果用户单击检查所有按钮，我必须检查两个对象，如果两个对象中缺少任何字段，我必须使用 object 索引来提醒字段名称。

How can I show the required field if the user clicks the check all button and check button please help me如果用户单击检查所有按钮和检查按钮，我如何显示必填字段请帮助我

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>

Answer 1

You should separate forms, in order to have the control of each one of them.您应该将 forms 分开，以便控制它们中的每一个。

Create an array variable $scope.forms = [];创建一个数组变量$scope.forms = []; , and use $index to set each form's name: , 并使用$index设置每个表单的名称：

<form name="forms[{{$index}}]">

Now you can control each form using $index:现在您可以使用 $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. $setSubmitted()也可以用于不同的情况。

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:单击“全部检查”时，一种方法是将所有 forms 设置为已提交并显示字段错误：

$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 循环）：

$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在此处查看更新的演示：演示

如何根据按钮单击验证表单字段？

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-03-01 09:00:09

如何根据按钮单击验证表单字段？

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-03-01 09:00:09

解决方案1
2 已采纳 2021-03-01 09:00:09