web-dev-qa-db-fra.com

Validation du champ de saisie du contrôleur d'alerte

Comment valider et afficher une erreur pour l'entrée dans le contrôleur d'alerte dans Ionic 2 ou 3

let Prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });

Quelqu'un a déjà mis à jour alertcontroller et a tiré une requête pour l'équipe Ionic. Je pense que la planification de l'équipe Ionic implémentera cela à l'avenir . https://github.com/ionic-team/ionic/pull/12541

J'ai besoin d'un peu de travail pour cette fonctionnalité de validation.

plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview

Apprécier ton aide.

angulartypescriptionic-frameworkionic2ionic3
8
CharanRoot

Pour l'instant, cette fonctionnalité n'a pas encore été implémentée. Vous pouvez voir ce problème Git .

J'ai utilisé la notification Toast ici et je n'ai reçu aucune plainte à ce sujet de la part de mon client :)

Voici ce que j'ai fait.

_ {le gestionnaire done du boxe d'alerte: _

{
          text: 'Done',
          handler: (data) => {
            if (EmailValidator.isValid(data.email)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid Email');
              return false;
            }
          }
        }

_ {La méthode de Toast est comme ceci:

showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

UI

 enter image description here

13
Sampath

J'ai trouvé un moyen de contourner la situation en utilisant la méthode setMessage. Initialement, le message sera vide et lorsque l'utilisateur n'aura saisi aucune valeur, le message de validation sera rempli au clic. Trouvez l'extrait de code ci-dessous

let Prompt = Alert.create({
  title: 'Alert input validation',
  message: '',
  inputs: [ 
    {
      name: 'email',
      placeholder: 'email'
    },
  ],
  buttons: [
    {
      text: 'Save',
      handler: data => {
                    let validateObj = this.validateEmail(data);
                    if (!validateObj.isValid) {
                        Prompt.setMessage('Your validation message');
                        return false;
                    } else {
                        //make HTTP call
                    }
                }
    }
  ]
});

Vous pouvez remplacer la police du message dans le fichier variable.scss comme ci-dessous

$alert-md-message-text-color:red;

 enter image description here

5
thecrusader

Vous pouvez valider Email en utilisant REGEX.

voici un échantillon. remplacez cette fonction par la vôtre. 

validateEmail(data) {
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
      return {
        isValid: true,
        message: ''
      };
    } else {
       return {
          isValid: false,
          message: 'Email address is required'
       }
    }
}

j'espère que cela aidera quelqu'un.

0
Milap Shah