Input and checkbox validation using AngularJS

Question

I have a page with a check box representing "All dates" and two input fields which represent the start date and end dates. When the page first loads the check box is unchecked. The requirement is if the check box is unchecked and there is nothing in the start and end date fields a message must display to the user.

This is what I have for the check box and input fields and the error message:

<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" />

Please select

This is what I have in the controller at the beginning:

vm.selectAllDates = false;

This is what I have in the submit function:

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

If the form is "valid" when I hit the submit button a modal window will display.

What's happening is the page loads and if I don't enter in dates or check the check box and I hit submit, the message appears and I can't submit which is fine.

When I check off the check box the message stays but I can submit.

When I uncheck the check box and enter dates the message stays but I can submit.

How do I hide the message once any of the conditions have been met? Sorry! I'm still a newbie at Angular.

Answer 1

I'm not sure this is "best practice", but you could use your form's validity to show/hide the message (since you've already setup the validation conditions).

You should be able to use something like

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

Alternatively, you can manually setup a $watch on your form's validity to do any other logic you might need

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

Answer 2

Okay, I figured it out. For the checkbox I put this:

<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

For the start date I put this:

<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" />

For the end date I put this:

<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" />

And for the message I put this:

<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>

I kept the code in the controller the same as what I put in my original post.

Thanks @ryanyuyu for answering so quickly. And thanks @DrCord for the info. I'll have to remember that!