Merge Anmeldeformular into main #21
|
@ -19,6 +19,7 @@
|
|||
"@angular/platform-browser": "^17.2.4",
|
||||
"@angular/platform-browser-dynamic": "^17.2.4",
|
||||
"@angular/router": "^17.2.4",
|
||||
"angular-iban": "^17.0.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"moment": "^2.30.1",
|
||||
|
@ -7163,6 +7164,19 @@
|
|||
"ajv": "^8.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/angular-iban": {
|
||||
"version": "17.0.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz",
|
||||
"integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^17.x",
|
||||
"@angular/core": "^17.x",
|
||||
"iban": "0.0.14"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
||||
|
@ -11102,6 +11116,11 @@
|
|||
"node": ">=10.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iban": {
|
||||
"version": "0.0.14",
|
||||
"resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz",
|
||||
"integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w=="
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
@ -24512,6 +24531,14 @@
|
|||
"fast-deep-equal": "^3.1.3"
|
||||
}
|
||||
},
|
||||
"angular-iban": {
|
||||
"version": "17.0.0",
|
||||
"resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz",
|
||||
"integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==",
|
||||
"requires": {
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
|
||||
|
@ -27423,6 +27450,11 @@
|
|||
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
|
||||
"dev": true
|
||||
},
|
||||
"iban": {
|
||||
"version": "0.0.14",
|
||||
"resolved": "https://registry.npmjs.org/iban/-/iban-0.0.14.tgz",
|
||||
"integrity": "sha512-+rocNKk+Ga9m8Lr9fTMWd+87JnsBrucm0ZsIx5ROOarZlaDLmd+FKdbtvb0XyoBw9GAFOYG2GuLqoNB16d+p3w=="
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
"@angular/platform-browser": "^17.2.4",
|
||||
"@angular/platform-browser-dynamic": "^17.2.4",
|
||||
"@angular/router": "^17.2.4",
|
||||
"angular-iban": "^17.0.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"moment": "^2.30.1",
|
||||
|
|
|
@ -31,6 +31,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
import { MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import {AngularIbanModule} from "angular-iban";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -68,6 +69,7 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter';
|
|||
MatCheckboxModule,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
AngularIbanModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
||||
|
|
|
@ -4,86 +4,165 @@
|
|||
|
||||
<mat-stepper>
|
||||
<!-- Step 1-->
|
||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
||||
<ng-template matStepLabel>Persönliche Informationen</ng-template>
|
||||
<div class="leftContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Name</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="firstName"
|
||||
placeholder="First name"
|
||||
required />
|
||||
</mat-form-field>
|
||||
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
||||
<!-- <form [formGroup]="firstFormGroup" class="flexContainerRow width50">-->
|
||||
<!-- <ng-template matStepLabel>Persönliche Informationen</ng-template>-->
|
||||
<!-- <div class="leftContainer">-->
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Name</mat-label>-->
|
||||
alioezdemir marked this conversation as resolved
Outdated
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
<!-- formControlName="firstName"-->
|
||||
<!-- placeholder="First name"-->
|
||||
<!-- required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Nachname</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="lastName"
|
||||
placeholder="Last name"
|
||||
required />
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Nachname</mat-label>-->
|
||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Placeholder auf Deutsch Placeholder auf Deutsch
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
<!-- formControlName="lastName"-->
|
||||
<!-- placeholder="Last name"-->
|
||||
<!-- required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Geburtstag</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="birthdatePicker"
|
||||
formControlName="birthdate"
|
||||
required />
|
||||
<mat-hint>MM.DD.YYYY</mat-hint>
|
||||
<mat-datepicker-toggle
|
||||
matSuffix
|
||||
[for]="birthdatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker
|
||||
#birthdatePicker
|
||||
startView="multi-year"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Geburtstag</mat-label>-->
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Hint muss hier DD.MM.YYYY sein Hint muss hier DD.MM.YYYY sein
|
||||
<!-- [matDatepicker]="birthdatePicker"-->
|
||||
<!-- formControlName="birthdate"-->
|
||||
<!-- required />-->
|
||||
<!-- <mat-hint>MM.DD.YYYY</mat-hint>-->
|
||||
<!-- <mat-datepicker-toggle-->
|
||||
<!-- matSuffix-->
|
||||
<!-- [for]="birthdatePicker"></mat-datepicker-toggle>-->
|
||||
<!-- <mat-datepicker-->
|
||||
<!-- #birthdatePicker-->
|
||||
<!-- startView="multi-year"></mat-datepicker>-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Geschlecht</mat-label>
|
||||
<mat-select>
|
||||
<mat-option value="male">männlich</mat-option>
|
||||
<mat-option value="female">weiblich</mat-option>
|
||||
<mat-option value="divers">divers</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="rightContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Adresse</mat-label>
|
||||
<input matInput formControlName="address" required />
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field>-->
|
||||
<!-- <mat-label>Geschlecht</mat-label>-->
|
||||
<!-- <mat-select>-->
|
||||
<!-- <mat-option value="male">männlich</mat-option>-->
|
||||
<!-- <mat-option value="female">weiblich</mat-option>-->
|
||||
<!-- <mat-option value="divers">divers</mat-option>-->
|
||||
<!-- </mat-select>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="rightContainer">-->
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Adresse</mat-label>-->
|
||||
<!-- <input matInput formControlName="address" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Postleitzahl</mat-label>
|
||||
<input matInput formControlName="postalCode" required />
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Postleitzahl</mat-label>-->
|
||||
<!-- <input matInput formControlName="postalCode" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Telefon</mat-label>
|
||||
<input matInput formControlName="phone" required />
|
||||
</mat-form-field>
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Telefon</mat-label>-->
|
||||
<!-- <input matInput formControlName="phone" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>E-Mail</mat-label>
|
||||
<input matInput formControlName="email" required />
|
||||
<mat-error>Ungültige E-Mail Adresse</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<div class="buttonsContainer">
|
||||
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||
<button
|
||||
mat-button
|
||||
matStepperNext
|
||||
[disabled]="firstFormGroup.status == 'INVALID'">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>E-Mail</mat-label>-->
|
||||
<!-- <input matInput formControlName="email" required />-->
|
||||
<!-- <mat-error>Ungültige E-Mail Adresse</mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- <div class="buttonsContainer">-->
|
||||
<!-- <button mat-button matStepperPrevious class="backButton">Zurück</button>-->
|
||||
<!-- <button-->
|
||||
<!-- mat-button-->
|
||||
<!-- matStepperNext-->
|
||||
<!-- [disabled]="firstFormGroup.status == 'INVALID'">-->
|
||||
<!-- Weiter-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </mat-step> <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
||||
<!-- <form [formGroup]="firstFormGroup" class="flexContainerRow width50">-->
|
||||
<!-- <ng-template matStepLabel>Persönliche Informationen</ng-template>-->
|
||||
<!-- <div class="leftContainer">-->
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Name</mat-label>-->
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
<!-- formControlName="firstName"-->
|
||||
<!-- placeholder="First name"-->
|
||||
<!-- required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Nachname</mat-label>-->
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
<!-- formControlName="lastName"-->
|
||||
<!-- placeholder="Last name"-->
|
||||
<!-- required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Geburtstag</mat-label>-->
|
||||
<!-- <input-->
|
||||
<!-- matInput-->
|
||||
<!-- [matDatepicker]="birthdatePicker"-->
|
||||
<!-- formControlName="birthdate"-->
|
||||
<!-- required />-->
|
||||
<!-- <mat-hint>MM.DD.YYYY</mat-hint>-->
|
||||
<!-- <mat-datepicker-toggle-->
|
||||
<!-- matSuffix-->
|
||||
<!-- [for]="birthdatePicker"></mat-datepicker-toggle>-->
|
||||
<!-- <mat-datepicker-->
|
||||
<!-- #birthdatePicker-->
|
||||
<!-- startView="multi-year"></mat-datepicker>-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field>-->
|
||||
<!-- <mat-label>Geschlecht</mat-label>-->
|
||||
<!-- <mat-select>-->
|
||||
<!-- <mat-option value="male">männlich</mat-option>-->
|
||||
<!-- <mat-option value="female">weiblich</mat-option>-->
|
||||
<!-- <mat-option value="divers">divers</mat-option>-->
|
||||
<!-- </mat-select>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="rightContainer">-->
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Adresse</mat-label>-->
|
||||
<!-- <input matInput formControlName="address" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Postleitzahl</mat-label>-->
|
||||
<!-- <input matInput formControlName="postalCode" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>Telefon</mat-label>-->
|
||||
<!-- <input matInput formControlName="phone" required />-->
|
||||
<!-- </mat-form-field>-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
<!-- <mat-label>E-Mail</mat-label>-->
|
||||
<!-- <input matInput formControlName="email" required />-->
|
||||
<!-- <mat-error>Ungültige E-Mail Adresse</mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- <div class="buttonsContainer">-->
|
||||
<!-- <button mat-button matStepperPrevious class="backButton">Zurück</button>-->
|
||||
<!-- <button-->
|
||||
<!-- mat-button-->
|
||||
<!-- matStepperNext-->
|
||||
<!-- [disabled]="firstFormGroup.status == 'INVALID'">-->
|
||||
<!-- Weiter-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </mat-step>-->
|
||||
|
||||
<!-- Step 2-->
|
||||
<mat-step [stepControl]="secondFormGroup">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, input, OnInit} from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import {ValidatorService} from "angular-iban";
|
||||
|
||||
export const MY_DATE_FORMAT= {
|
||||
parse: {
|
||||
|
@ -9,7 +9,7 @@ export const MY_DATE_FORMAT= {
|
|||
display: {
|
||||
dateInput: 'DD.MM.YYYY',
|
||||
monthYearLabel: 'MMM YYYY',
|
||||
dateA11yLabel: 'YYYY-MM-DD',
|
||||
dateA11yLabel: 'DD.MM.YYYY',
|
||||
monthYearA11yLabel: 'MMMM YYYY'
|
||||
}
|
||||
};
|
||||
|
@ -20,6 +20,7 @@ export const MY_DATE_FORMAT= {
|
|||
styleUrls: ['./student-register.component.scss'],
|
||||
})
|
||||
export class StudentRegisterComponent implements OnInit {
|
||||
inputText: string = '';
|
||||
masterFormGroup!: FormGroup;
|
||||
firstFormGroup!: FormGroup;
|
||||
secondFormGroup!: FormGroup;
|
||||
|
@ -109,7 +110,7 @@ export class StudentRegisterComponent implements OnInit {
|
|||
|
||||
this.secondFormGroup = this._formBuilder.group({
|
||||
accountHolder: ['', Validators.required],
|
||||
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||
iban: ['', [Validators.required, ValidatorService.validateIban]],
|
||||
bic: ['', Validators.required],
|
||||
nameOfFinancialInstitute: ['', Validators.required],
|
||||
einzugsermaechtigung: ['', Validators.required],
|
||||
|
@ -119,18 +120,20 @@ export class StudentRegisterComponent implements OnInit {
|
|||
einwilligung: ['', Validators.required],
|
||||
einverstaendniserklaerung: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => {
|
||||
if(value) {
|
||||
this.capitalizeFirstTwoLetters();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Custom validator function
|
||||
requireAtLeastOne(formGroup: FormGroup) {
|
||||
const danceTraining = formGroup.get('danceTraining')?.value;
|
||||
const karateTraining = formGroup.get('karateTraining')?.value;
|
||||
const freeTraining = formGroup.get('freeTraining')?.value;
|
||||
|
||||
if (!danceTraining && !karateTraining && !freeTraining) {
|
||||
return { requiredAtLeastOne: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
capitalizeFirstTwoLetters() {
|
||||
let ibanValue = this.secondFormGroup.get("iban")?.value
|
||||
if(ibanValue.length >= 2) {
|
||||
this.secondFormGroup.patchValue({
|
||||
iban: ibanValue.substring(0,2).toUpperCase()+ibanValue.substring(2)
|
||||
},{emitEvent:false}) //Prevent circular change detection
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Placeholder auf Deutsch