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?

score 13 · Accepted Answer · answered Apr 24 '15 at 22:08

13

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

answered Apr 24 '15 at 22:08

dfsq

191,768
25
236
258

Thanks for the response! How would it work though with two input fields? The two input fields I'm using each have different ng-models: one uses a start date and one uses an end date. I tried moving the ng-change code into the input using data.test ng-model so that when the check box was checked, clear the data and it doesn't work. – rsford31 Apr 27 '15 at 17:38
Two inputs and one checkbox? – dfsq Apr 27 '15 at 17:52
Yup...I've modified my original post to show you what I tried. I had added your example but to the input field rather than the check box. – rsford31 Apr 27 '15 at 18:30

score 0 · Answer 2 · answered Apr 27 '15 at 19:06

I ended up building off of what you showed me @dfsq. Thank you very much for your help! I ended up creating a function for ng-change and putting it on the check box:

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

Then in my controller I added the code to clear both start and end date input fields:

vm.clearFields = function () {
            vm.selectedReport.Parameters.StartDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.StartDate;
            vm.selectedReport.Parameters.EndDate = vm.selectAllDates ? '' : vm.selectedReport.Parameters.EndDate;
        }

If there is a better way, please let me know. Thanks again!

Clear input fields when checkbox is checked

2 Answers2