konkrete_beispiele

8. Beispielsituation: Bike-Geschäft¶

Mieter-Management: Kontaktdaten-Formular¶

Wie würden Sie ein Formular mit Validierung erstellen, um die Kontaktdaten der Mieter aufzunehmen?¶

Beispiel: - Formularfelder: Name, E-Mail, Telefonnummer. - Validierung: - Name: Pflichtfeld. - E-Mail: Pflichtfeld und gültiges Format. - Telefonnummer: Pflichtfeld.

Code-Beispiel¶

In der app.component.ts:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  contactForm = this.fb.group({
    name: ['', Validators.required], // Pflichtfeld
    email: ['', [Validators.required, Validators.email]], // E-Mail-Validierung
    phone: ['', Validators.required], // Pflichtfeld
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.contactForm.valid) {
      console.log('Formulardaten:', this.contactForm.value);
    } else {
      console.log('Formular ungültig');
    }
  }
}

In der app.component.html:

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name:</label>
    <input formControlName="name">
    <small *ngIf="contactForm.get('name')?.invalid">Name ist erforderlich!</small>
  </div>

  <div>
    <label>E-Mail:</label>
    <input formControlName="email">
    <small *ngIf="contactForm.get('email')?.invalid">Ungültige E-Mail-Adresse!</small>
  </div>

  <div>
    <label>Telefonnummer:</label>
    <input formControlName="phone">
    <small *ngIf="contactForm.get('phone')?.invalid">Telefonnummer ist erforderlich!</small>
  </div>

  <button type="submit" [disabled]="contactForm.invalid">Abschicken</button>
</form>

Komponentenstruktur¶

Welche Komponenten würden Sie erstellen, um die Formularfunktionalität modular aufzubauen?¶

Eine mögliche Struktur könnte so aussehen: 1. MieterListeComponent: Zeigt die Liste aller Mieter an. 2. MieterFormularComponent: Beinhaltet das oben beschriebene Formular. 3. BikesVerwaltungComponent: Zeigt verfügbare Bikes und Buchungen an.

Beispiel für eine neue Komponente erstellen:

ng g c mieter-formular

In der MieterFormularComponent könntest du das oben gezeigte Formular integrieren.

Routing¶

Beispiel für Routen: 1. Startseite (/): Zeigt die Willkommensseite. 2. Mieter-Verwaltung (/mieter): Zeigt das Formular und die Liste der Mieter. 3. Bike-Verwaltung (/bikes): Zeigt die verfügbaren Bikes und Buchungen.

Routing-Modul erstellen:

ng g m app-routing --flat --module=app

Code für die app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MieterFormularComponent } from './mieter-formular/mieter-formular.component';
import { BikesVerwaltungComponent } from './bikes-verwaltung/bikes-verwaltung.component';

const routes: Routes = [
  { path: '', redirectTo: '/mieter', pathMatch: 'full' },
  { path: 'mieter', component: MieterFormularComponent },
  { path: 'bikes', component: BikesVerwaltungComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Integriere die Navigation in dein Template:

<nav>
  <a routerLink="/mieter">Mieter-Verwaltung</a>
  <a routerLink="/bikes">Bike-Verwaltung</a>
</nav>
<router-outlet></router-outlet>

Verleihverwaltung: Bike-Liste aus API abrufen¶

wird nicht gefragt (fachgespräch (8.Jan 2025))

Zusammenfassung¶

Formulare mit Validierung: Verwende Reactive Forms für Eingaben und Validierungen.
Komponentenstruktur: Teile die Funktionalitäten in separate Komponenten wie MieterFormularComponent und BikesVerwaltungComponent.
Routing: Erstelle Routen für verschiedene Bereiche der Anwendung (z. B. /mieter und /bikes) und nutze das RouterModule für die Navigation.