Input and checkbox validation with AngularJS
I have a page with a checkbox that stands for "All Dates" and two input fields that represent the start and end dates of the date. The first time the page is loaded, the check box is cleared. The requirement is that if the checkbox is unchecked and there is nothing in the start and end dates, the message should be displayed to the user.
This is what I have for the checkbox and input fields and 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" />
This is what I have in my 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 click the Submit button, a modal window is displayed.
What happens when the page loads, and if I don't provide dates or check the box and I hit submit, a message pops up and I can't imagine it's okay.
When I check the box, the message remains, but I can send.
When uncheck the box and enter the dates, the message remains, but I can send.
How do I hide the message after any of the conditions are met? I'm sorry! I am still new to Angular.
source to share
I'm not sure if this is "best practice", but you can use your form to show / hide the message (since you have already set the validation conditions).
You should be able to use something like
<p ng-show='reportForm.$valid'>Error Message</p>
Alternatively, you can manually configure $watch
on your form 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
});
source to share
Ok I figured it out. For the checkbox, I'll 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
I added the following as the start date:
<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" />
At the end of the 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 post, 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 posted in my original post.
Thanks @ryanyuyu for answering so quickly. And thanks @DrCord for the info. I will have to remember this!
source to share