WIP: Anmeldeformular #16

alioezdemir · 2024-03-12T18:08:41+01:00

alioezdemir commented

2024-03-12 18:08:41 +01:00

No description provided.

igorpropisnov was assigned by alioezdemir

2024-03-12 18:08:42 +01:00

alioezdemir added 9 commits 2024-03-12 18:08:43 +01:00

822e17068d First step of stepper implemented.

155fcde278 Implement Validations for Step 1 and Datepicker for Birthdate

2ffddafe9a Implement Step 2

f3a268f3f3 further Implementation Step 2

f148665a01 Finished Stepper

f8282fd1b0 Merge remote-tracking branch 'origin/Anmeldeformular' into feature/dependency-day

# Conflicts:
#	frontend/angular.json
#	frontend/src/app/app-routing.module.ts
#	frontend/src/app/app.module.ts
#	frontend/src/styles.scss

161f4082cc run prettier

7f3aa2c922 Change to a custom theme.

c971e4dddc Remove unused method.

igorpropisnov reviewed 2024-03-12 20:55:17 +01:00

frontend/src/app/components/students/student-register/student-register.component.ts

					
				@ -0,0 +1,136 @@

				import { Component, OnInit } from '@angular/core';

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

				@Component({

igorpropisnov commented

2024-03-12 20:50:29 +01:00

Bitte in eine Standalone Componente umwandeln + changeDetection auf OnPush setzen.

frontend/src/app/components/students/student-register/student-register.component.ts

					
				@ -0,0 +108,4 @@

				    this.secondFormGroup = this._formBuilder.group({

				      accountHolder: ['', Validators.required],

				      iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],

igorpropisnov commented

2024-03-12 18:20:54 +01:00

Ich empfehle, das Paket "iban" zu installieren. Du findest es hier:

https://www.npmjs.com/package/iban

Dieses Paket enthält bereits den gesamten mathematischen Kram, der in der ISO 13616-1 (International Bank Account Number) spezifiziert ist. Mehr Informationen dazu findest du hier:

https://www.swift.com/standards/data-standards/iban-international-bank-account-number

import * as IBAN from 'iban';

// Funktion zur Validierung einer IBAN
export const ibanValidator = (control: AbstractControl): ValidationErrors | null => {
    // Prüft, ob der Wert null oder undefined ist, oder ein leerer String - keine Validierung notwendig
    if (control.value === null || control.value === '') {
        return null; // Kein Fehler zurückgeben
    }

    // Prüft, ob der eingegebene Wert, nachdem Leerzeichen entfernt wurden, leer ist
    if (control.value.trim().length === 0) {
        return generateInvalidResponse(); // Gib einen Fehler zurück, wenn das Feld nur Leerzeichen enthält
    }

    // Entfernt alle Leerzeichen und konvertiert den String zu Großbuchstaben, um Konsistenz für die IBAN-Prüfung zu gewährleisten
    const sanitizedString = control.value.trim().replaceAll(' ', '').toUpperCase();

    // Verwendet die IBAN-Bibliothek, um zu prüfen, ob die bereinigte IBAN gültig ist
    return IBAN.isValid(sanitizedString) ? null : generateInvalidResponse(); // Gibt null zurück, wenn gültig, sonst einen Fehler
};

// Hilfsfunktion, um ein Validierungsfehler-Objekt zu erzeugen
const generateInvalidResponse = () => ({ invalidIban: true });

Das ganze kannst du wie folgt anwenden:

formGroup = new FormGroup({
  iban: new FormControl<string>('', { validators: [Validators.required, iban] }),
)}

Ich empfehle, das Paket "iban" zu installieren. Du findest es hier: https://www.npmjs.com/package/iban Dieses Paket enthält bereits den gesamten mathematischen Kram, der in der ISO 13616-1 (International Bank Account Number) spezifiziert ist. Mehr Informationen dazu findest du hier: https://www.swift.com/standards/data-standards/iban-international-bank-account-number ``` import * as IBAN from 'iban'; // Funktion zur Validierung einer IBAN export const ibanValidator = (control: AbstractControl): ValidationErrors | null => { // Prüft, ob der Wert null oder undefined ist, oder ein leerer String - keine Validierung notwendig if (control.value === null || control.value === '') { return null; // Kein Fehler zurückgeben } // Prüft, ob der eingegebene Wert, nachdem Leerzeichen entfernt wurden, leer ist if (control.value.trim().length === 0) { return generateInvalidResponse(); // Gib einen Fehler zurück, wenn das Feld nur Leerzeichen enthält } // Entfernt alle Leerzeichen und konvertiert den String zu Großbuchstaben, um Konsistenz für die IBAN-Prüfung zu gewährleisten const sanitizedString = control.value.trim().replaceAll(' ', '').toUpperCase(); // Verwendet die IBAN-Bibliothek, um zu prüfen, ob die bereinigte IBAN gültig ist return IBAN.isValid(sanitizedString) ? null : generateInvalidResponse(); // Gibt null zurück, wenn gültig, sonst einen Fehler }; // Hilfsfunktion, um ein Validierungsfehler-Objekt zu erzeugen const generateInvalidResponse = () => ({ invalidIban: true }); ``` Das ganze kannst du wie folgt anwenden: ``` formGroup = new FormGroup({ iban: new FormControl<string>('', { validators: [Validators.required, iban] }), )} ```

frontend/src/app/components/students/student-register/student-register.component.ts

					
				@ -0,0 +122,4 @@

				  }

				  // Custom validator function

				  requireAtLeastOne(formGroup: FormGroup) {

igorpropisnov commented

2024-03-12 18:38:05 +01:00

D-R-Y

requireAtLeastOne(formGroup: FormGroup): ValidationErrors | null {
  const controls = Object.keys(formGroup.controls);

  // Prüfe, ob mindestens ein Wert gesetzt ist
  const isAnyFieldFilled = controls.some(key => {
    const value = formGroup.get(key)?.value;
    return value !== null && value !== '';
  });

  return isAnyFieldFilled ? null : { requiredAtLeastOne: true };
}

D-R-Y ``` requireAtLeastOne(formGroup: FormGroup): ValidationErrors | null { const controls = Object.keys(formGroup.controls); // Prüfe, ob mindestens ein Wert gesetzt ist const isAnyFieldFilled = controls.some(key => { const value = formGroup.get(key)?.value; return value !== null && value !== ''; }); return isAnyFieldFilled ? null : { requiredAtLeastOne: true }; } ```

igorpropisnov reviewed 2024-03-12 20:58:43 +01:00

frontend/src/app/components/students/student-register/student-register.component.html

					
				@ -0,0 +64,4 @@

				            [matDatepicker]="birthdatePicker"

				            formControlName="birthdate"

				            required />

				          <mat-hint>MM/DD/YYYY</mat-hint>