webentwicklung-frage-antwort-db.com.de

Gültigkeitsprüfung des Alert Controller-Eingabefelds

So überprüfen und zeigen Sie den Fehler für die Eingabe im Alert Controller in Ionic 2 oder 3 an

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

Einige haben Alertcontroller bereits aktualisiert und haben eine Anfrage für das Ionic-Team gestellt. Ich denke, das Ionic-Team plant dies in Zukunft umzusetzen . https://github.com/ionic-team/ionic/pull/12541

Ich brauche ein paar Umgehungsmöglichkeiten für diese Validierungsfunktion.

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

Schätze deine Hilfe.

8
CharanRoot

In diesem Moment wurde diese Funktion nicht implementiert. Sie sehen diese Git-Ausgabe .

Ich habe hier die Toast-Benachrichtigung verwendet und ich habe keine Beschwerde von meinem Kunden erhalten :)

Hier ist was ich getan habe.

done-Handler der Alarmbox:

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

Toast-Methode ist wie folgt:

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

Ich habe eine Umgehung gefunden, indem ich die setMessage-Methode verwendete. Die anfängliche Nachricht ist leer und wenn der Benutzer keinen Wert eingegeben hat, wird die Bestätigungsnachricht beim Klicken ausgefüllt. Hier finden Sie den Code-Ausschnitt

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

Sie können die Schriftart der Nachricht in der Datei variable.scss wie folgt überschreiben

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

 enter image description here

5
thecrusader

Sie können E-Mails mit REGEX überprüfen.

hier ist ein Beispiel. Ersetzen Sie einfach diese Funktion durch Ihre. 

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

ich hoffe das hilft jemandem.

0
Milap Shah