¿Cuál es una manera simple de invalidar un control de casilla de verificación en un formulario angular si la casilla de verificación no está marcada? Me gustaría hacerlo en HTML solo si es posible.

Esto es lo que obtengo por ahora:

<form (ngSubmit)="onSubmit()" #f="ngForm">

  <!-- ... -->

  <ion-item>
    <ion-label>I accept terms</ion-label>
    <ion-checkbox name="termsAccepted"
                  [(ngModel)]="termsAccepted"
                  required>
    </ion-checkbox>
  </ion-item>
</form>

Aquí, la directiva required no funciona: tan pronto como marque la casilla de verificación, se considerará válida para siempre, incluso si la desmarca entonces (que es un comportamiento normal de la directiva required en realidad)

Miro allí pero no encontré un directiva para esto.

¿Debo corregir mi propia directiva o me perdí una manera más simple? Gracias.

2
David D. 26 may. 2017 a las 15:02

2 respuestas

La mejor respuesta

Las casillas de verificación son un poco difíciles aquí. Debes hackear un poco si quieres establecer un campo en particular como no válido. Puede agregar un evento de cambio, que pasa y que establecería manualmente el campo como no válido y válido en función de si está marcado o no, digamos una función llamada checkIfChecked. También debe usar ViewChild para poder consultar su formulario:

import { ViewChild, NgForm } from '@angular/core';

@ViewChild('f') f: NgForm;

checkIfChecked() {
  if (this.termsAccepted == false) {
    this.f.controls.termsAccepted.setErrors({notValid:true});
  }
  else {
    this.f.controls.termsAccepted.setErrors(null);
  }      
}

Tal vez hay una forma más bonita, abierta a sugerencias;)


Sin embargo, todo esto sería mucho más fácil con una forma reactiva, me refiero a esta respuesta. donde haría lo siguiente:

this.myForm = builder.group({
    termsAccepted: [false, Validators.pattern('true')]
});
2
AJT82 26 may. 2017 a las 13:03

A partir de su comentario, declaró que desea deshabilitar el botón de envío si no está marcado. Y desea lograr esto solo con HTML, así que esto es lo que tengo:

<button [disabled]="!f.valid || !termsAccepted">submit</button>

Tenga en cuenta que puede usar operadores de asignación dentro de la plantilla && y || funcionará. (Podría estar equivocado sobre cómo lo llamas).

Esto es más una piratería, en lugar de usar esto, es posible que desee corregir la forma en que construye su formulario. Debe leer ReactiveForms, confíe en mí, esto le ahorrará mucho tiempo en el futuro.

ACTUALIZACIÓN : el elemento checkbox no tiene estado required. Es válido si está marcado o no. Es posible que desee crear una directiva, algo así como [mustBeChecked] en su lugar.

1
borislemke 26 may. 2017 a las 12:34