Comment afficher les messages d'erreur dans les formes Ioniques 3

Ici, j'ai essayer d'afficher les messages d'erreur dans forms dans Ionic-3.

Voici mon email.html fichier:

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

Dans mon email.ts fichier que j'ai:

export class EmailSignupPage {

   form : FormGroup;

   constructor(
       private formBuilder: FormBuilder,
       public navCtrl: NavController,
       public navParams: NavParams,
   ) {
       this.form = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required, Validators.email])]
       });
   }

   ionViewDidLoad() {

   }

   next() {
       this.navCtrl.push(CredentialPage);
   }

   cancel() {
       this.navCtrl.popToRoot();
   }
}

Je pense que mon code est bien dans la email.ts fichier, mais je ne sais pas comment afficher les erreurs dans mon formulaire quand il valider que je suis nouveau sur ionique et angulaire!

Est-il un qui peut m'aider?

Merci!

Qu'essayez-vous de réaliser (mise conditionnelle couleurs rouges, montrant conditionnelle des messages, d'autres comportements personnalisés...) ? Je veux dire que vous disposez déjà d'une condition message d'erreur devrait apparaître dans le cas où il y a des erreurs (vous utilisez *ngIf correctement).
C'est le point! Je ne sais pas comment l'utiliser *ngIf pour afficher le message d'erreur. Ce que j'avais à faire ici n'est pas le fonctionnement! Je vais déjà faire la condition d'erreur pour les couleurs. Pouvez-vous savez comment l'utiliser *ngIf dans ma ce cas?
1) votre signIn() méthode ( <form (submit)="signIn()"> ) sera appelée lors d'un clic soit CANCEL bouton ou NEXT bouton, sauf si vous les mettez dehors de la <form> balise (comme le déplacement de l'ensemble de la <ion-list>...</ion-list> après </form>). 2) Vous êtes à l'aide de la Angular2 *ngIf directive correctement. En fait, *ngIf="myVar" fonctionne comme un javascript if (myVar){}. Si myVar est pas défini ou est faux, *ngIf sera pas afficher le contenu auquel il est attaché. Jetez un oeil sur les exemples du lien. (PS: votre code se comporte bien quand je build).

InformationsquelleAutor Hiren Gohel | 2017-09-22

9

Je ne sais pas comment afficher les erreurs dans mon formulaire quand il valide

Si vous voulez juste pour afficher les erreurs dans certains endroits, le *ngIf directive est ce que vous voulez. Mettre des messages d'erreur partout où vous voulez et ajouter un *ngIf pour indiquer les cas dans lesquels le message doit être affiché.

L'idée de base avec <p *ngIf="emailIsCorrect">error message: incorrect email</p> est d'avoir une propriété dans votre classe (dans l' .fichier ts) qui vous permettra de mettre à jour à réfléchir si oui ou non le message devrait apparaître. L'idée principale est d'utiliser des méthodes dans votre fichier ts qui va effectuer les contrôles de validation et de mise à jour que emailIsCorrect de la propriété.

Comme un exemple, vous pourriez utiliser un (keypress)="performCheckOnKeyPress($event.keyCode)" attribut dans votre <ion-input ...> pour appeler une méthode de validation lorsque l'utilisateur appuie sur une touche.

Voir ci-dessous pour plus d'explications.

Effectuant des vérifications spécifiques et de validation

J'ai essayé d'afficher les messages d'erreur dans forms dans Ionic-3.

Il y a plusieurs choix:

L'affichage du contenu/des messages d'erreur conditionnelle:
Le Angular2 *ngIf de la directive va se cacher les choses en se basant sur l'état des variables dans votre .fichier ts.

*ngIf fonctionne comme un javascript if: *ngIf="myVar" <=> if (myVar){}. Un indéfini ou faux myVar sera pas afficher le contenu. Regardez les exemples de la doc pour les cas d'utilisation.

L'exécution de validation personnalisée: vous pouvez choisir d'ajouter supplémentaire propriétés et méthodes de votre classe dans la .ts fichier et d'afficher le contenu conditionnellement à l'aide de *ngIf.

Vous pouvez également utiliser javascript vérifie:
- désactiver choix (comme cela est fait dans votre code avec <button [disabled]=""...>)
- ensemble du contenu comme du texte ou des classes CSS à l'aide ternaire vérifie {{variable ? 'basic-class':'error-class' }}. Vous pouvez également utiliser la méthode des appels comme <p>{{ foo() }}</p>, où foo(){ return "some text"; }.
- effectuer des vérifications spécifiques lorsque certains événements se produisent, en utilisant les attributs des balises (comme vous le feriez avec le javascript onclick => (click)="" , onkeypress => (keypress)="", ...).
- si vous stocker tous les messages d'erreur dans une variable unique et veulent le montrer dans un endroit comme <span>Please correct the following fields **email** and **password**</span> (lorsque les deux e-mail et le mot de passe champ ne passe pas la validation), vous pouvez utiliser <span>{{ errorMessagesVariable }}</span>.
- vous pouvez également jeter un oeil à la angular2 ngModel de la directive et les exemples fournis dans la doc. En fait, il s'agit d'une base de validation pour les e-mails et d'autres composants lorsque vous utilisez <form [formGroup] ...> et la formGroup va automatiquement mettre à jour les champs de la variable form: FormGroup; vous avez déclaré dans votre .ts fichier.
Les éléments mentionnés ci-dessus peuvent ne pas refléter les meilleures pratiques pour certains cas d'utilisation. Ils sont mentionnés pour votre propre connaissance de l'ionic framework.

Exemples:

Par exemple, les suivantes ternaire est de bonne pratique dans ionique de développement:
```
<ion-label color="{{ form.controls.email.errors && form.controls.email.dirty ? 'danger' : 'primary' }}" floating> Email </ion-label>
```
De traitement des événements de pression de touche:
```
<ion-input [formControl]="form.controls['email']" (keypress)="performCheckOnKeyPress($event.keyCode)"></ion-input>.
```
Erreur dans votre code

HTML question:

Il y a une erreur dans votre code qui permet d'obtenir envoyé s'il est ou non valide.

Lorsque vous mettez un <button> dans un formulaire, une fois pressé le bouton de déclencher la méthode de soumission du formulaire que vous avez fourni pour la forme (<form (submit)="signIn()" ...>). Dans ce cas, en appuyant sur la CANCEL bouton également soumettre le formulaire.

le correctif: si vous voulez avoir de l'ANNULER et ENSUITE les boutons uns à côté des autres, si vous préférez vous déplacer à la fois de l'extérieur de l' <form>...</form> tag.
Notez qu'en déplaçant le bouton SUIVANT en dehors de la forme, il ne sera pas soumettre le formulaire plus (il ne appelez votre next() méthode).

Si vous voulez que votre bouton SUIVANT pour soumettre le formulaire, même en dehors de la <form>, vous devez également appeler votre signIn() méthode lorsqu'il est cliqué. c'est à dire (click)="next(); signIn()".

Remarque: vous pouvez écrire assez bien plaine javascript pour la (click)="..." et d'autres angulaire de la directive sur les attributs (fonctionne aussi pour *ngIf="..."). Il y a quelques limitations à ce javascript, mais juste essayer le code JS que vous aimeriez y mettre...

Note pour ionique v1 développeurs

Ionique 1 utilisé angulaire 1. Ionique v2/v3 utilisation angulaire 2.
Les modifications introduites dans angulaire 2:
- (keypress)="", (click)="" remplacé ng-keypress="" et ng-click="".
- *ngIf, *ngFor remplacé ng-if et ng-for
- Merci pour votre réponse! Très bonne réponse pour le néophyte Ionique dans les! J'ai fais toutes les choses dans mon .ts fichier, juste ne sais pas comment faire pour l'afficher. Ici, vous avez essayé d'expliquer tout ce qui est bon pour moi et les autres newbie pour Ionique. Merci man! Cheers! 🙂
InformationsquelleAutor JMM

J'ai résolu ce problème avec *ngIf condition.

J'ai mis ci-dessous le code et ça fonctionne pour moi:

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

J'ai besoin d'utiliser seulement:

<p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

Au lieu de

<p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

Qui montre simplement les erreurs si il y en a!

@JMM merci pour la meilleure réponse et vous êtes des génies! J'ai besoin que ce *ngIf="form.controls['email'].errors && form.controls['email'].dirty"

Grâce à vous tous!

Je vous remercie. Btw, vous pouvez écrire votre ionique de configuration (la sortie de $ ionic version et $ ionic config get->type: ). Parce que *ngIf soit avec form.controls['email'].errors ou form.controls.email.errors travailler sur un ioniques 3.7.0 ionic-angular app et c'est comment il devrait être sur les autres versions. Mais je me demande peut-être il y a un ioniques (ou angulaire 2) la libération d'une question. Ce serait une question mérite d'être connu, si il y en a un
Oui, je suis en train de travailler avec l'Ionique 3.

InformationsquelleAutor Hiren Gohel

Vous devez vous connecter pour publier un commentaire.

Effectuant des vérifications spécifiques et de validation

Erreur dans votre code

Note pour ionique v1 développeurs