Ввод и проверка флажка с помощью AngularJS

Question

У меня есть страница с флажком, обозначающим «Все даты» и два поля ввода, которые представляют даты начала и окончания даты. При первой загрузке страницы флажок снят. Требование состоит в том, что флажок снят, а в поля даты начала и окончания ничего не отображается, и пользователь должен показать сообщение.

Это то, что у меня есть для флажка и поля ввода и сообщение об ошибке:

<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="$parent.vm.selectedReport.Parameters.StartDate == null || $parent.vm.selectedReport.Parameters.EndDate == null" />All Available Dates 

<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy" 
      ng-disabled="$parent.vm.selectAllDates" 
      ng-model="$parent.vm.selectedReport.Parameters.StartDate" 
      is-open="beginningDateOpened" 
      ng-required="$parent.vm.selectAllDates == false" 
      close-text="Close" /> 
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy" 
      ng-disabled="$parent.vm.selectAllDates" 
      ng-model="$parent.vm.selectedReport.Parameters.EndDate" 
      is-open="endDateOpened" 
      ng-required="$parent.vm.selectAllDates == false" 
      close-text="Close" /> 

Пожалуйста, выберите

Это то, что я имею в контроллере в начале:

vm.selectAllDates = false; 

Это то, что у меня есть в функции отправки:

if ($scope.reportForm.$valid) { 
       //do stuff 
      } 
      else 
      { 
       $scope.reportForm.submitted = true; 
      } 

Если форма «действительна», когда я нажимаю кнопку отправки, отобразится модальное окно.

Что происходит, когда страница загружается, и если я не укажу даты или поставлю флажок, и я попал в submit, появится сообщение, и я не могу представить, что в порядке.

Когда я устанавливаю флажок, сообщение остается, но я могу отправить.

Снимите флажок и введите даты, когда сообщение остается, но я могу отправить.

Как скрыть сообщение после выполнения любого из условий? Сожалею! Я все еще новичок в Angular.

Answer 1

Я не уверен, что это «лучшая практика», но вы можете использовать свою форму для отображения/скрытия сообщения (поскольку вы уже настроили условия проверки).

Вы должны быть в состоянии использовать что-то вроде

<p ng-show='reportForm.$valid'>Error Message</p> 

Кроме того, вы можете настроить вручную с $watch на действия вашей формы, чтобы сделать какой-либо другой логики вам может понадобиться

$scope.$watch('reportForm.$valid', function(isValid) { 
    //change some value to show/hide the message 
    //any other logic for a change in validity 
}); 

Answer 2

Хорошо, я понял, это из. Для флажком я ставлю это:

<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates 

Для даты начала я поставил это:

<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy" 
      ng-disabled="$parent.vm.selectAllDates" 
      ng-model="$parent.vm.selectedReport.Parameters.StartDate"    
      is-open="beginningDateOpened" 
      ng-required="$parent.vm.selectAllDates == false" 
      close-text="Close" /> 

На дату окончания я ставлю это:

<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy" 
      ng-disabled="$parent.vm.selectAllDates" 
      ng-model="$parent.vm.selectedReport.Parameters.EndDate" 
      is-open="endDateOpened" 
      ng-required="$parent.vm.selectAllDates == false" 
      close-text="Close" /> 

И для сообщения я положите это:

<div ng-show="reportForm.submitted || reportForm.dateSelectAll.$touched || reportForm.beginningDate.$touched 
     || reportFrom.endDate.$touched"> 
     <span class="error" ng-show="reportForm.dateSelectAll.$error.required || reportForm.beginningDate.$error.required || reportFrom.endDate.$error.required">Please select a Dissolved date</span> 
    </div> 

Я сохранил код в контроллере так же, как и то, что я разместил в своем оригинальном посте.

Спасибо @ryanyuyu за ответ так быстро. И спасибо @DrCord за информацию. Я должен это вспомнить!