ion input > Ionic Formular Inputs + ngmodel erklärt (2022)

Intelligente Formulare Ionic- Steffen Lippke

Kennst Du schon die essenzielle Grundlage für 85 % der Apps im App Store?

Bei der Mehrheit der Apps poppt zuerst ein Login auf.

Das ist die Begrüßung für jeden neuen Kunden, der erste Eindruck.

Ich zeige Dir, wie Du beeindruckende Eingabemasken mit Ionic bauen kannst.

Starten wir!

Inhalt - Weg zu Deinem Login

Ziel

Coding

Konzept

Erweiterung

Grundlagen

Fazit

1. Kapitel

Ziel: Formular mit Ionic Input + Ion Select

Ziel

Mit den Eingabefeldern, Auswahlen und Checkboxes bauen wir eine typischen Anmelde- und Registrierungsmaske, mit der Deine Nutzer die Möglichkeit haben eine personifizierte App zu nutzen.

Begrüße Deine Kunden mit Ihrem Namen und adaptiere die App nach den Wünschen der Kunden.

 

 

Notwendige Grundlage: Ionic Anfänger Tutorial

In diesem Tutorial wirst Du lernen, wie Du…

  • … in Ionic Eingabefelder (Ionic Input) anlegst
  • ... in Ionic Auswahlen baust (Ion Select)
  • … mit Toggels (Schalter) und Checkboxen umgehst
  • … und diese mit Code zum Leben erweckst
Bank Login Screen mit Ionic Input
Bank Login Screen mit Ionic Input

2. Kapitel

Konzept: Inputs, Select, Checkboxes

Konzept

In jeder Anmeldemaske sind verschieden Formularelemente vorhanden, die je nach Typ anders behandelt werden müssen.

Mit einer Bestätigung müssen die Eingaben an ein Backend übertragen bzw. an die nächste Navigationsansicht übergeben werden.

 

 

Die verschiedenen Eingabemöglichkeiten fordern eine unterschiedliche Verarbeitung der Informationen, die sie uns übermitteln: Inputs liefern Strings zurück, Checkboxen geben als Rückgabewert einen Wahrheitswert boolean (wahr, falsch) zurück.

Die Elemente auf der HTML Oberfläche werden ansprechend gestaltet und mit dem Angular Code im TypeScript verknüpft.

Ab Ionic 4 ist die einfachste Strategie, Daten von einer Ansicht in die nächste zu übertragen, ist der Ionic Storage.

3. Kapitel

Grundlagen: Die Verbindung zwischen Angular und HTML

Grundlagen

Für die Eingabefelder in dem HTML Datei brauchst Du eine Verbindung zu TypeScript.

Angular bietet Dir 3 verschiedene Arten von Verknüpfung, die eine Veränderung des Formulars erkennt.

 

Bei Eingabefelder in dem HTML Datei ist es notwendig mit dem TypeScript eine Verbindung herzustellen. Angular nutzt dafür 3 verschiedene Arten von Verknüpfung, die es ermöglicht auf Veränderungen im Formular zu reagieren.

Eigenschaften, die sogenannten properties, bindet Angular in seien Code ein mit…

… einer Ein-Weg-Bindung (von Daten zu HTML-Quelle) durch z.B. einen Einschub. Aus dem vorherigen Tutorials ist bekannt, dass man mit {{}} geschweiften Klammer Daten aus der TypeScript Datei in die HTML Datei einbinden kann. Angular bietet zusätzlich noch als Einweg-Bindung die eckigen Klammern mit der Du z.B. Style Eigenschaften den HTML Komponenten über Deinen Angular Code zu weisen kannst: [style.background-color]= „green“

… einer Ein-Weg-Bindung von (HTML-Quelle zu den Daten) durch die Du z.B. ein notwendiges Klick-Event (click) auslöst. Durch den Druck auf den Button wird durch die HTML Datei ein Request ausgesendet mit im TypeScript Datei eine Funktion aufgerufen wird.

… einen Zwei-Weg-Bindung mit [(property)] kannst Du eine Anbindung an einem Schalter realisieren. Der Schalter kann den Code beeinflussen und der Code die Schalterposition ändern. Das ist besonders praktisch, wenn Du neue Daten in den Code laden willst und eine andere Default-Schalterposition notwendig wird,

4. Kapitel

Coden: 1,2,3 Log Dich ein

Coding

Nach der ganzen Theorie wollen wir mit dem Programmieren beginnen. Wir wenden die zuvor gelernten Konzepte an.

Das erhöht das Verständnis.

Viel Spaß beim Coden!

Projekteinstieg

Zuerst starten wir das Projekt mit dem Befehl unten. Der PC erstellt eine einzelne Ionic Seite ohne Tabs oder Menu.

ionic start register blank

Dann brauchen wir noch zwei andere Seiten.

ionic g page register

ionic g page afterlogin

Diese Seiten müssen noch der Datei app.module.ts unter declarations und entryComponents hinzugefügt werden.

import { RegisterPage } from '../pages/register/register';

import { AfterloginPage } from '../pages/afterlogin/afterlogin';

Struktur von Ionic Projekt
Struktur von Ionic Projekt

Der Einstieg: einfacher Login

In home.html definieren wir spezifisch die Inputs nach ihrem Typ.

E-Mails sollen als E-Mail angezeigt werden und Passwörter als Geheim-Punkte mit type=“passwort“. Für die Labels wählte ich den floating Modus, eine für Android typisch moderne Animation: Die Labels stehen in der zuerst in der Eingabe selber und „fließen“ beim Tippen auf die Eingabe nach oben.

(click) löst ein Klick-Event aus und ruft eine Angular Funktion in TypeScript auf (Ein-Weg-Bindung). Das [(ngModel)] verbindet die Eingabe mit der Variable per Zwei-Weg-Bindung.

home.ts beinhaltet eine einfache, mögliche Logik für die Überprüfung des Logins.

Die Variablen password und mail sind mit den Eingaben verbunden. Die Funktion checkAccount() überprüft die Eingabe.

Zur Vereinfachung habe ich hier die Credits hart gecodetet. Durch einen Provider, die Konvertierung der Passwörter und der Einsatz von Datenbanken lassen sich auch mehrere Credits managen.

Ein Alert gibt eine Fehlgeschlagen-Warnung aus, wenn der Nutzer falsche Eingaben tätigt.

Für Neukunden: Account anlegen

Register Screen
Register Screen

Register.html zeigt noch mehrere Arten von Eingabefeldern. Bei Bedarf nutze den Code als Quellen für andere Projekte.

Die Eingaben sind mit Zwei-Weg-Bindung an register.ts verknüpft.

In saveAccount() kannst Du zur Erweiterung noch Code hinzufügen, der die Credits in Deine Datenbank ablegt.

Noch eine Begrüßung: Personalisierte App

Result Screen Afterlogin
Result Screen Afterlogin

Die letzte Seite beschreibt den afterlogin.html hier wird mit {{}} als eine Ein-Weg-Bindung. Außerdem zeigt die Seite die Mail des Nutzers angezeigt, sowie einen Button zum wieder ausloggen.

In der letzten Datei übernimmt der Konstruktor mit navParams.get() eine Variabel von der vorherigen Seite und gibt diese aus. .pop in logout() als Gegenoperation von Push schließt die geöffnete Seite. Der Vorgänger-Seite erscheint.

5. Kapitel

Erweiterungen: Filtern von Notizen mit ngIf

Erweiterung
Erweiterung

Hast Du noch nicht genug von dem Ionic Tutorial?

Oder möchtest Du noch mehr von Ionic kennenlernen?

Dann zeige ich Dir, wie Du die App um einen Filter mit ngIf erweitern kannst.

ngIf ist wie ngFor auch eine strukturierende Anweisung. Diese arbeitet mit den Wahrheitswerten, die boolean gespeichert werden.  Mit ngIf kannst Du z. B. aus der Liste Einträge nach dem Datum filtern.

*ngIf=“notizen.date == '20.05.2018'“

Oder Du arbeitest eine Funktionsaufruf ein, der eine boolean mit true oder false zurück gibt.

z.B.

*ngIf=“isWrittenOnDate(notizen.date)“

6. Kapitel

Fazit: Deine Notizen auf 1 Blick

Fazit
Fazit

Vielen Dank dafür, dass Du das 3. Ionic Tutorial engagiert durchgearbeitet hast. Ich hoffe, es hat Dir geholfen ein tieferes Verständnis von Listen zu bekommen.

Bitte kommentiere, dass ich mich verbessern kann.

Ich freue mich sehr auf Deine Kommentar oder einen Share von Dir.

Jetzt teilen! 🙂

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Kommentare 2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.


Jeden Monat teile ich mit den Mitgliedern
4 neue praxisnahe ausführliche Tutorials (je 1000+ Wörter).


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!

Die Website nutzt nur technisch notwendige Cookies.