angularjs - validacion - Borrar campos de entrada cuando la casilla de verificación está marcada

validar formulario angular 5

Question

Tengo una casilla de verificación y dos campos de entrada. O bien se debe marcar la casilla de verificación o se deben completar los dos campos de entrada. Estoy haciendo la validación usando Angular, es decir, ng-show, ng-required.

Cuando la casilla de verificación está marcada, los dos campos de entrada están deshabilitados, es decir, ng-disabled = "$ parent.vm.selectAllDates".

Ahora también tengo que borrar todos los datos que se hayan ingresado en los cuadros de texto.

La casilla de verificación no está marcada en la carga de la página. Se establece en el controlador de esta manera: vm.selectAllDates = false;

¿Hay alguna forma de borrar los campos de entrada cuando la casilla de verificación está marcada en Angular?

EDITAR He agregado lo que intenté hacer usando tu ejemplo

Casilla de verificación:

<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

Entrada de fecha de inicio:

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

Fecha final:

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

Una cosa realmente extraña era que quería ver lo que estaba sucediendo, así que agregué

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

después del campo de entrada StartDate. Cuando seleccioné una fecha, la fecha se agregó al campo de entrada y debajo de la entrada. Cuando hice clic en la casilla de verificación, la fecha se eliminó del campo de entrada y también debajo del campo de entrada. ¡Así que funcionó! Pero en el momento en que eliminé el código anterior de debajo del campo de entrada, dejó de funcionar ... ¿Estaba como wha?

Answer 1

Terminé construyendo lo que me mostraste @dfsq. ¡Muchas gracias por su ayuda! Terminé creando una función para ng-change y poniéndola en la casilla de verificación:

<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

Luego en mi controlador agregué el código para borrar los campos de entrada de fecha de inicio y finalización:

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

Si hay una mejor manera, por favor avíseme. ¡Gracias de nuevo!

Answer 2

El enfoque simple es usar la directiva ngChange en la casilla de verificación y establecer el modelo de entrada de texto en la cadena vacía si la casilla de verificación está marcada. Algo como esto:

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

Demostración: http://plnkr.co/edit/pKGui2LkP487jP0wOfHf?p=preview