Angular / ionic : comment rendre un contrôle de case à cocher invalide ?

Question

Quel est un moyen simple de rendre invalide un contrôle de case à cocher dans un formulaire Angular si la case à cocher n'est pas cochée ? J'aimerais le faire en HTML seulement si possible.

Voici ce que j'obtiens pour le moment :

    J'accepte les termes

Ici, la directive required ne fonctionne pas : dès que vous cochez la case à cocher, elle est considérée comme valide pour toujours, même si vous la décochez ensuite (ce qui est en fait un comportement normal de la directive required)

Je regarde ici mais je n'ai pas trouvé de directive pour cela.

Dois-je écrire ma propre directive ou ai-je manqué une manière plus simple ? Merci.

Answer 1

Les cases à cocher sont un peu délicates ici. Vous devez bricoler un peu si vous voulez définir un champ particulier comme invalide. Vous pourriez ajouter un événement de changement, qui passerait et qui réglerait manuellement le champ comme invalide ou valide en fonction de s'il est coché ou non, disons une fonction appelée checkIfChecked. Vous devez également utiliser ViewChild pour pouvoir référencer votre formulaire :

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);
  }      
}

Peut-être qu'il y a une meilleure façon, ouvert aux suggestions ;)

---

Tout cela serait beaucoup plus facile avec un formulaire réactif cependant, je vous renvoie à cette réponse. où vous feriez ce qui suit :

this.myForm = builder.group({
    termsAccepted: [false, Validators.pattern('true')]
});

Answer 2

De votre commentaire, vous avez indiqué que vous voulez désactiver le bouton de soumission s'il n'est pas coché. Et vous voulez réaliser cela avec HTML seulement, voici donc ce que j'ai :

soumettre

Notez que vous pouvez utiliser des opérateurs d'assignation à l'intérieur du modèle && et || fonctionneront. (Je pourrais me tromper sur la façon dont vous l'appelez).

C'est davantage de la bidouille, au lieu d'utiliser cela vous voudrez peut-être améliorer la façon dont vous créez votre formulaire. Vous devriez vous renseigner sur les ReactiveForms, croyez-moi, cela vous fera gagner beaucoup de temps à l'avenir.

MISE À JOUR : l'élément checkbox n'a pas d'état required. Il est valide qu'il soit coché ou non. Vous voudrez peut-être créer une directive, quelque chose comme [mustBeChecked] à la place.