Containervalidierung

Hintergrundinformationen

Sie können die isValid -Eigenschaft eines Containers verwenden, um die Eingabevalidierung für alle Steuerelemente innerhalb des Containers zu überprüfen.

Dies ist einfacher, da Sie beim Erstellen Ihrer App nicht mehr jedes Steuerelement einzeln erwähnen müssen.

In diesem Beispiel erstellen wir ein einfaches Formular mit fünf Steuerelementen in einem einzigen Container:

• Zwei Textfelder: eines mit dem Namen Nameund ein zweites mit dem Namen E- Mail (Eingabetyp Email ).
• Eine Datumsauswahl mit dem Namen „ Geburtsdatum“ .
• Eine Dropdownliste mit dem Namen Area.
• Eine Schaltfläche namens Submit.

Schritte

1. Öffnen Sie Ihre bereits vorhandene Anwendung oder starten Sie eine neue Anwendung.
2. Fügen Sie Ihrer App einen Container hinzu.

3. Fügen Sie ein Textfeldsteuerelement innerhalb des Containers hinzu.

   • Benennen Sie es in Name um und fügen Sie Name in der Eigenschaft Beschriftung hinzu.
   • Fügen Sie =true in der Eigenschaft Erforderlich hinzu.

4. Fügen Sie ein Datepicker -Steuerelement innerhalb des Containers hinzu.

   • Benennen Sie es in Geburtsdatum um und fügen Sie Date of birth in der Eigenschaft Beschriftung hinzu.

5. Fügen Sie ein zweites Textfeldsteuerelement innerhalb des Containers hinzu.

   • Wählen Sie Email als Eingabetypaus.
   • Benennen Sie es in E- Mail um und fügen Sie Name in der Eigenschaft Label hinzu.
   • Fügen Sie =true in der Eigenschaft Erforderlich hinzu.
   • Fügen Sie @company.com in der Eigenschaft Domäne zulassen hinzu .

6. Fügen Sie ein Dropdown-Steuerelement innerhalb des Containers hinzu.

   • Benennen Sie es in Bereich um und fügen Sie Name in der Eigenschaft Bereich hinzu.
   • Fügen Sie Folgendes in der Eigenschaft „Listenquelle “ hinzu: =["rural", "urban"] .
   • Fügen Sie =true in der Eigenschaft Erforderlich hinzu.

7. Fügen Sie ein Button -Steuerelement außerhalb des Containers hinzu.

   • Benennen Sie es um. Senden.
   • Fügen Sie Folgendes in der Eigenschaft Deaktiviert hinzu: !Container.isValid.
     
     

     

     
     

Verfahrensergebnisse

Nachdem Sie alle obigen Schritte ausgeführt haben, können Sie eine Vorschau Ihrer App anzeigen.

Während der Vorschau der App ist die Schaltfläche „Senden “ deaktiviert. Die Schaltfläche ist nur aktiviert, wenn die Felder Name, E- Mail (einschließlich der richtigen @company.com -Domäne) und Bereich ausgefüllt sind.