Проверка формы с помощью angularjs

0

Я хочу, чтобы проверка на форме была угловой. У меня три поля ввода. Все три требуются, когда один из них вводится. В противном случае они не требуются. Кнопка "Продолжить" должна быть включена только тогда, когда все три введены или не введены.

Вы можете просмотреть код этого плунжера. Здесь фрагмент тоже, на всякий случай, плункер неудобен:

angular.module('test', []).config(function() {});

angular.module('test').controller('testctrl', function($rootScope, $scope, $location) {
  $scope.admin = [{
    "number": "2"
  }];
  $scope.adminInfos = {};
  $scope.validations = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="test_form">
  <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].lastname.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

  <br/>
  <br/>

  <button ng-disabled="test_form.$invalid">Continue</button>

</form>

У меня проблема, когда кнопка продолжения по-прежнему включена, если я ввожу имя и оставляю фамилию и адрес электронной почты пустыми.

Кнопка "Продолжить" должна быть включена, если все три не введены или все три введены.

Теги:

3 ответа

1
Лучший ответ

Условие ng-required неверно, измените ваше ng-обязательное условие для использования или (||) вместо & для всех полей

 ng-required="adminInfos[admin.number].lastname.length || adminInfos[admin.number].email.length"

Проверьте этот плункер, он работает..

Поделиться
  • 0
    Ох .. Это была глупая ошибка. В любом случае спасибо!!
1

У вас есть логический недостаток. ng-required должно быть или (||) не и (&&). Смотрите вилку ниже.

Plunkr

<input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />

В качестве примечания, пожалуйста, поместите эту сложную логику интерфейса внутри метода на контроллере :)

Поделиться
0

Вам не нужно делать ng-required, вы можете просто заменить это просто "обязательным", чтобы указать, что это необходимо для того, чтобы форма была действительной. Смотри ниже:

<!DOCTYPE html>
<html ng-app="test">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="testctrl">
  <form name="test_form">
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" required />
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

    <br/>
    <br/>

    <button ng-disabled="test_form.$invalid">Continue</button>

  </form>
</body>

</html>
Поделиться
  • 0
    требуется только в том случае, если одно из полей является обязательным, а два других - обязательными. Это может быть в любом порядке. В противном случае вы можете нажать продолжить.
  • 0
    Правильно ли я понимаю, кнопка продолжения должна быть включена, когда ни один или все три введены? Если нет, я не уверен, что полностью понимаю требования.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню