Clear input fields when checked

Question

I have a checkbox and two input fields. Either check the box or fill in two input fields. I am checking with Angular, i.e. Ng-show, ng-required.

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

Now I also need to clear any data that can be entered into the text fields.

The checkbox is not set when the page loads. It is set in the controller as follows: vm.selectAllDates = false;

Is there a way to clear input fields if the checkbox is checked in Angular?

EDIT I ​​added what I tried to do 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 

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

Expiration 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 strange thing: I wanted to see what happens, so I added

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

after the StartDate input field. When I selected the date, the date was added to the input field, as well as under the input. When I checked, the date was removed from the input field as well as from the input field. So it worked! But at that moment when I deleted the above code from under the input field, it stopped working ... I was like wha?

Answer 1

A simple approach is to use the ngChange directive on the checkbox and set the text input model for the empty string if the checkbox is checked. Something like that:

 <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

Answer 2

I ended up showing me @dfsq. Many thanks for your help! I finished creating a function for ng-change and put it in a checkbox:

 <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 code to clear the input fields for the start and end dates:

 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!