Clear input fields when checkbox is checked

Question

I have a check box and two input fields. Either the check box has to be checked or the two input fields have to be filled in. I'm doing validation using Angular i.e. ng-show, ng-required.

When the checkbox is checked the two input fields are disabled i.e. ng-disabled="$parent.vm.selectAllDates".

Now I also have to clear any data that may have been entered into the textboxes.

The check box is not checked on page load. It is set in the controller like this: vm.selectAllDates = false;

Is there some way to clear the input fields when the check box is checked in Angular?

EDIT I've added what I tried doing using your example

Check box:

<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

Start date input:

 <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"
           ng-change="$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate"
           close-text="Close" />

End date:

 <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-change="$parent.vm.selectedReport.Parameters.EndDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.EndDate"
           ng-required="$parent.vm.selectAllDates == false && $parent.vm.selectedReport.Parameters.EndDate == null"
           close-text="Close" />

One really odd thing was I wanted to see what was happening so I added

{{$parent.vm.selectedReport.Parameters.StartDate = $parent.vm.selectAllDates ? '' : $parent.vm.selectedReport.Parameters.StartDate}}  

after the StartDate input field. When I selected a date, the date was added to the input field as well as underneath the input. When I clicked the check box, the date was removed from the input field as well as from under the input field. So it worked! But the minute I removed the above code from under the input field it stopped working...I was like wha?

Answer 1

The simple approach is to use ngChange directive on checkbox and set text input model to empty string if checkbox is checked. Something like this:

<input type="text" ng-model="data.test" ng-disabled="data.check">

<input type="checkbox" ng-model="data.check" value="one"
            ng-change="data.test = data.check ? '' : data.test">

Demo: http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview