Ionic Formular Inputs + Ionic Input ngmodel erklärt [ion input]

 

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

Bei der Mehrheit der Apps popt zuerst ein Login auf.

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

Heute wollen wir in diesem Tutorial lernen, wie Du beeindruckende Eingabemasken mit Ionic bauen kannst.

Mache Deine App kundenspezifisch mit einem persönlichen Login.

Inhalt - Weg zu Deinem Login

Ziel

Coding

Konzept

Erweiterung

Grundlagen

Fazit

1. Kapitel

Herausforderung & Ziel: Formular mit Ionic Input + Ion Select

Ziel
Ziel

Mit 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 bauest (Ion Select)
  • … mit Toggels (Schalter) und Checkboxen umgehst
  • … und diese mit dem Code zum Leben erweckst
Bank Login Screen mit Ionic Input
Bank Login Screen mit Ionic Input

2. Kapitel

Konzept & Lösungsansatz: Inputs, Select, Checkboxes

Konzept
Konzept

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

Mit einer Bestätigung müssen Daten übertragen bzw. an den nächsten Seite über Parameterübergabe mitgenommen 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 eine boolean (wahr, falsch) zurück.

Die Elemente auf der HTML Oberfläche werden ansprechend gestaltet und mit den Angular Code im TypeScript verknüpft. Mit navPrams sende beim Aufruf einer neuen Seite gleich notwendige Variablen mit, die später der zweiten Screen anzeigt.

3. Kapitel

Grundlagen: Die Verbindung zwischen Angular und HTML

Grundlagen
Grundlagen

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.

 

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
Coding

Nach der ganzen Theorie wollen wir mit dem Coden 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 eine 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 hartgecodetet. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.