web-dev-qa-db-fra.com

angular 5 modèles de formulaire détectent le changement de statut de validité du formulaire

sont formes réactives la voie à suivre pour avoir un composant capable d’écouter les changements dans le statut de validité du formulaire qu’il contient et d’exécuter les méthodes de certains composants?

Il est facile de désactiver le bouton d'envoi dans le modèle en utilisant templateRef comme [disabled]="#myForm.invalid", mais cela n'implique pas la logique du composant.

En regardant doc de modèles je n'ai pas trouvé de solution

angularformsangular5angular-reactive-formsangular-forms
19
Cec

Si vous voulez obtenir uniquement le status et non le value, vous pouvez utiliser statusChanges:

export class Component {

    @ViewChild('myForm') myForm;

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

Si vous souhaitez même modifier les données, vous pouvez vous abonner au valueChanges du form et vérifier l'état du formulaire à l'aide de this.myForm.status:

export class Component {

    @ViewChild('myForm') myForm;

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

Les valeurs possibles de status sont: [~ # ~] valide [~ # ~] , [~ # ~] invalide [~ # ~] , [~ # ~] en attente [~ # ~] , ou DESACTIVE.

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

32
Sravan

Vous pouvez faire quelque chose comme ceci pour détecter un changement de validité et exécuter une méthode selon que 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;
  }
}
3
Chris Halcrow

Vous pouvez vous abonner à tous les changements de formulaire et y mettre en œuvre votre logique.

@ViewChild('myForm') myForm;

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