Как я могу проверить поля формы на основе нажатия кнопки?

У меня 3 кнопки. 2 находится внутри ng-repeat, а один снаружи ng-repeat, поэтому я хочу показать предупреждение о необходимом поле, если пользователь нажимает эти кнопки.

если пользователь нажимает кнопку «Проверить 0», я должен проверить только первый объект, и если какое-либо значение данных формы отсутствует, я должен предупредить пользователя, например, «это (имя пользователя) является обязательным полем.

если пользователь нажимает кнопку проверки 1, я должен проверить только второй объект, и если какое-либо значение данных формы отсутствует, я должен предупредить пользователя, например, «это (имя пользователя) является обязательным полем.

и если пользователь нажимает кнопку «Проверить все», я должен проверить оба объекта, и если какое-либо поле отсутствует в обоих объектах, я должен предупредить имя поля с индексом объекта.

Как я могу показать обязательное поле, если пользователь нажимает кнопку «Проверить все» и кнопку «Проверить», пожалуйста, помогите мне

Демо введите здесь описание изображения

var app = angular.module("app", ['ngMessages']);
app.controller("myCtrl", function($scope) {
    $scope.users = [
        {
        "inputName":"aj",
        "inputPassword":"1234",
        "inputEmail":"[email protected]",
        },{
        
        "inputName":"gj",
        "inputPassword":"1234",
        "inputEmail":"[email protected]",
        }
    ];
     $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>


person its me    schedule 20.02.2021    source источник
comment
Отвечает ли это на ваш вопрос? Как добавить пользовательскую проверку в форму AngularJS?   -  person Randy Casburn    schedule 20.02.2021
comment
Нет. Я должен проверять, нажимает ли пользователь кнопки, и на основе кнопки мы должны проверять объекты.   -  person its me    schedule 21.02.2021


Ответы (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() можно использовать и для других случаев.

демонстрация Если вам нужна дополнительная помощь, дайте мне знать

ИЗМЕНИТЬ

Когда нажата кнопка «Проверить все», одним из подходов было бы установить все формы как отправленные и показать ошибки поля:

$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

person Bill P    schedule 01.03.2021
comment
если я нажму кнопку «Проверить все», как я могу получить информацию о форме. - person its me; 02.03.2021
comment
Я отредактировал свой ответ, проверьте еще раз - person Bill P; 02.03.2021
comment
мы должны динамически проверять формы. Здесь это жестко закодировано. Я думаю, на основе индекса мы можем проверять формы, верно? - person its me; 02.03.2021
comment
это правильно да - person Bill P; 02.03.2021
comment
почему я не получаю ng-сообщение, требующее проверки. пожалуйста, проверьте мою демонстрацию, если я удалю значение из поля, вы получите сообщение, подобное этому полю. - person its me; 15.03.2021
comment
Вы можете использовать либо $submitted, либо $dirty, вот подход, подобный вашему, который показывает ошибку после изменения ввода DEMO - person Bill P; 15.03.2021