angulaire 5 formulaires de détecter le changement de la forme état de validité

sont formes réactives le chemin à parcourir afin d'avoir un composant qui peut écouter des changements dans l'état de validité de la forme qu'elle contient et d'exécuter certains composant de méthodes?

Il est facile de désactiver le bouton soumettre dans le modèle à l'aide de templateRef comme [disabled]="#myForm.invalid", mais cela n'implique pas que le composant est logique.

Regardant modèle de formulaires " doc je n'ai pas trouver un moyen

InformationsquelleAutor Cec | 2018-04-05
  1. 37

    Si vous souhaitez obtenir uniquement les status et pas le value vous pouvez utiliser statusChanges:

    export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

    Si vous voulez, même des modifications de données, vous pouvez vous abonner à la valueChanges de la form et vérifier l'état de la forme à l'aide de this.myForm.status:

    export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

    Valeurs possibles de statut sont: VALIDE, INVALIDE, en attendant, ou DÉSACTIVÉ.

    Voici la référence pour la même

    • Ne sais pas qui a fait le downvote... Depuis myForm serait une instance de AbstractControl, c'est encore mieux pour vous abonner à la forme.statusChanges qui renvoie une observable de VALIDES, INVALIDES, en ATTENTE ou à mobilité réduite. En fait, je suis un peu inquiet à propos de l'ATTENTE que je ne connais pas son sens...
    • En attendant, c'est quand l'angle est au milieu d'un contrôle de validation, quand il commence à la validation et à procéder à toutes les vérifications, l'état commence pending et il finit par changer Valid ou Invalid
    • et Si vous n'avez pas besoin de modification des données, vous pouvez utiliser statusChanges
    • Donc, je peux simplement ignorer l'ATTENTE et attendre une nouvelle stats de la valeur à être émis. Merci beaucoup 🙂
    • Merci @Sravan pour votre précieuse réponse. Il a travaillé. Mais est-il possible de retarder la détection des changements comme pendant 5 secondes? En fait je suis à l'appel de l'api pour l'enregistrement des données et à la détection de changement est l'envoi de trop nombreuses demandes. Merci de mettre la lumière sur elle.
    InformationsquelleAutor Sravan
  2. 3

    Vous pouvez faire quelque chose comme ce n'détecter une validité de modifier et d'exécuter une méthode basée sur si le formulaire est VALID ou INVALID.

    this.myForm.statusChanges
  .subscribe(val => this.onFormValidation(val));

onFormValidation(validity: string) {
  switch (validity) {
    case "VALID":
      //do 'form valid' action
      break;
    case "INVALID":
      //do 'form invalid' action
      break;
  }
}
    • Cela pourrait être réduit à un opérateur ternaire: validity === "VALID" ? methodOne() : methodTwo() cependant - je avertir s'il vous plaît être prudent et de ne pas utiliser cette approche dans des fichiers volumineux, il peut être bizarre, de la syntaxe à envisager dans de gros fichiers.
    InformationsquelleAutor Chris Halcrow
  3. 1

    Vous pouvez vous abonner à l'ensemble de la forme de changements et de mettre en œuvre votre logique.

    @ViewChild('myForm') myForm;

this.myForm.valueChanges.subscribe(data => console.log('Form changes', data));
    InformationsquelleAutor ritaj