Проверка угловой формы для отображения сообщения об ошибке

Question

Проверка угловой формы для отображения сообщения об ошибке

0

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

У меня есть форма с двумя настройками радио - Нет, Да. Когда пользователь выбирает "да", у него есть возможность выбирать значения из списка флажков. Когда пользователь выбирает переключатель "Да", он должен выбрать хотя бы один флажок, иначе должно появиться сообщение об ошибке, предлагающее пользователю выбрать хотя бы одно значение флажка. Если параметр радио "Нет", выбор флажка не требуется. Как я могу достичь этого, используя проверку угловой формы?

 <p ng-if="noCheckboxSlected" class="form-error"><img src="images/icon-error.png" alt=""/>Sorry, please select a option.</p>
        <form name="answersToQuestions">
        <div class="ice-form-radio">
             <input type="radio" name="mpq{{allergies.questionId}}" ng-model="allergies.answer" ng-click="setQuestion(false)" value="no">
             <label for="mpq{{allergies.questionId}}no"><span>No </span></label>
        </div>
            <div class="ice-form-radio">
                <input type="radio" name="mpq{{questionId}}"  ng-model="allergies.answer" value="yes" ng-click="setCondition(true)"/>
                <label for="mpq{{questionId}}yes"><span>Yes</span></label>
            </div>
            <table>
                <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
                    <td ng-repeat="allergy in allergyList track by $index">
                        <div class="ice-form-checkbox">
                            <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" />
                            <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        </form>

благодаря

nikitha 01 дек. 2015, в 22:04

Источник

Теги:

javascript

jquery

angularjs

forms

checkbox

1 ответ

Ещё вопросы

Igloob · Answer 1 · 2015-12-01T18-49-00.000Z

Сначала вы должны изменить ng- вместо ng-, щелкнув по вашему входу. ng- изменение запускается при изменении значения вашего ввода.

Все еще используя ng- изменение, вы можете написать метод в контроллере, который проверяет, проверен ли хотя бы один из ваших флажков, и установите переменную в true или false:

<tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
  <td ng-repeat="allergy in allergyList track by $index">
    <div class="ice-form-checkbox">
       <!-- put ng-change here -->
      <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" ng-change="checkOnce()"/>
      <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label>
    </div>
  </td>
</tr>

и в вашем контроллере:

$scope.onceIsCheck = false;
$scope.checkChange = function () {
  $scope.onceIsCheck = false;
  for (var i = 0; i < $scope.filteredAllergies.length; ++i) {
     if($scope.filteredAllergies[i].allergyIndicator) {
       $scope.onceIsCheck = true;
     }
  }
};

На ваш взгляд:

<p ng-if="onceIfCheck">You have to check at least one item</p>