Merge Anmeldeformular into main #21
|
@ -1,7 +1,8 @@
|
||||||
|
<div class="stepperContainer">
|
||||||
<mat-stepper>
|
<mat-stepper>
|
||||||
<!-- Step 1-->
|
<!-- Step 1-->
|
||||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
<mat-step [stepControl]="firstFormGroup">
|
||||||
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
<form [formGroup]="firstFormGroup" class="flexContainerRow">
|
||||||
<ng-template matStepLabel>Persönliche Informationen</ng-template>
|
<ng-template matStepLabel>Persönliche Informationen</ng-template>
|
||||||
<div class="leftContainer">
|
<div class="leftContainer">
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
|
@ -28,8 +29,8 @@
|
||||||
matInput
|
matInput
|
||||||
[matDatepicker]="birthdatePicker"
|
[matDatepicker]="birthdatePicker"
|
||||||
formControlName="birthdate"
|
formControlName="birthdate"
|
||||||
|
placeholder="DD.MM.YYYY"
|
||||||
alioezdemir marked this conversation as resolved
Outdated
|
|||||||
required />
|
required />
|
||||||
<mat-hint>DD.MM.YYYY</mat-hint>
|
|
||||||
<mat-datepicker-toggle
|
<mat-datepicker-toggle
|
||||||
matSuffix
|
matSuffix
|
||||||
[for]="birthdatePicker"></mat-datepicker-toggle>
|
[for]="birthdatePicker"></mat-datepicker-toggle>
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
|
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-label>Geschlecht</mat-label>
|
<mat-label>Geschlecht</mat-label>
|
||||||
<mat-select>
|
<mat-select formControlName="gender" required >
|
||||||
<mat-option value="male">männlich</mat-option>
|
<mat-option value="male">männlich</mat-option>
|
||||||
<mat-option value="female">weiblich</mat-option>
|
<mat-option value="female">weiblich</mat-option>
|
||||||
<mat-option value="divers">divers</mat-option>
|
<mat-option value="divers">divers</mat-option>
|
||||||
|
@ -60,7 +61,7 @@
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Telefon</mat-label>
|
<mat-label>Telefon</mat-label>
|
||||||
<input matInput formControlName="phone" required />
|
<input matInput formControlName="phone" required/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
|
@ -71,7 +72,6 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="buttonsContainer">
|
<div class="buttonsContainer">
|
||||||
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
|
||||||
<button
|
<button
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
|
@ -80,7 +80,6 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
<!-- Step 2-->
|
<!-- Step 2-->
|
||||||
<mat-step [stepControl]="secondFormGroup">
|
<mat-step [stepControl]="secondFormGroup">
|
||||||
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
|
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
|
||||||
|
@ -127,7 +126,6 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
<!-- Step 3-->
|
<!-- Step 3-->
|
||||||
<mat-step>
|
<mat-step>
|
||||||
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
|
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
|
||||||
|
@ -154,10 +152,12 @@
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
[disabled]="thirdFormGroup.status == 'INVALID'"
|
[disabled]="thirdFormGroup.status == 'INVALID'"
|
||||||
|
(click)="submit()"
|
||||||
>
|
>
|
||||||
Fertig
|
Fertig
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
</mat-stepper>
|
</mat-stepper>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,24 +1,23 @@
|
||||||
|
.stepperContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
.mat-stepper-horizontal {
|
.mat-stepper-horizontal {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
min-width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-form-field {
|
.mat-form-field {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-stepper-horizontal {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexContainerRow {
|
.flexContainerRow {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.width50 {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.width20 {
|
.width20 {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
@ -48,7 +47,6 @@
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
border-radius: 10px 10px 0px 0px;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,40 +26,39 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
secondFormGroup!: FormGroup;
|
secondFormGroup!: FormGroup;
|
||||||
thirdFormGroup!: FormGroup;
|
thirdFormGroup!: FormGroup;
|
||||||
infoTextEinzugermaechtigung =
|
infoTextEinzugermaechtigung =
|
||||||
'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n' +
|
'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige' +
|
||||||
'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' +
|
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.' +
|
||||||
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +
|
'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein' +
|
||||||
'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n' +
|
'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr' +
|
||||||
'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr\n' +
|
|
||||||
'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.';
|
'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.';
|
||||||
|
|
||||||
infoTextEinwilligungserklaerung =
|
infoTextEinwilligungserklaerung =
|
||||||
'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n' +
|
'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher' +
|
||||||
'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n' +
|
'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.' +
|
||||||
'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n' +
|
'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben' +
|
||||||
'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n' +
|
'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.' +
|
||||||
'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n' +
|
'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke' +
|
||||||
'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n' +
|
'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-' +
|
||||||
'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n' +
|
'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.' +
|
||||||
'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n' +
|
'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und' +
|
||||||
'Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n' +
|
'Nutzung meiner Daten auf freiwilliger Basis erfolgt.' +
|
||||||
'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n' +
|
'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger' +
|
||||||
'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n' +
|
'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine' +
|
||||||
'Widerrufserklärung werde ich richten an die unten angegebene Adresse';
|
'Widerrufserklärung werde ich richten an die unten angegebene Adresse';
|
||||||
|
|
||||||
infoTextEinverstaendniserklaerung =
|
infoTextEinverstaendniserklaerung =
|
||||||
'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n' +
|
'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,' +
|
||||||
'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n' +
|
'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf' +
|
||||||
'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht\n' +
|
'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht' +
|
||||||
'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten\n' +
|
'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten' +
|
||||||
'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n' +
|
'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass' +
|
||||||
'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n' +
|
'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht' +
|
||||||
'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n' +
|
'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb' +
|
||||||
'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n' +
|
'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.' +
|
||||||
'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n' +
|
'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit' +
|
||||||
'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n' +
|
'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der' +
|
||||||
'jeweiligen Veranstaltung zur Folge haben.\n' +
|
'jeweiligen Veranstaltung zur Folge haben.' +
|
||||||
'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n' +
|
'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene' +
|
||||||
'Veranstaltungen ist ausgeschlossen.';
|
'Veranstaltungen ist ausgeschlossen.';
|
||||||
|
|
||||||
constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {}
|
constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {}
|
||||||
|
@ -72,14 +71,15 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
birthdate: ['', Validators.required],
|
birthdate: ['', Validators.required],
|
||||||
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
|
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
|
||||||
address: ['', Validators.required],
|
address: ['', Validators.required],
|
||||||
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
phone: ['', [Validators.required, Validators.pattern(/^(\+?\d{1,3})?[ ]*\d{9,}$/)]],
|
||||||
|
gender: ['', Validators.required],
|
||||||
email: ['', [Validators.required, Validators.email]],
|
email: ['', [Validators.required, Validators.email]],
|
||||||
});
|
});
|
||||||
|
|
||||||
this.secondFormGroup = this._formBuilder.group({
|
this.secondFormGroup = this._formBuilder.group({
|
||||||
accountHolder: ['', Validators.required],
|
accountHolder: ['', Validators.required],
|
||||||
iban: ['', [Validators.required, ValidatorService.validateIban]],
|
iban: ['', [Validators.required, ValidatorService.validateIban]],
|
||||||
bic: ['', Validators.required],
|
bic: ['', [Validators.required, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]],
|
||||||
nameOfFinancialInstitute: ['', Validators.required],
|
nameOfFinancialInstitute: ['', Validators.required],
|
||||||
directDebitAuthorization: ['', Validators.required],
|
directDebitAuthorization: ['', Validators.required],
|
||||||
});
|
});
|
||||||
|
@ -105,6 +105,10 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
removeWhiteSpace(input:string):string {
|
||||||
|
return input.replace(/\s+/g, '')
|
||||||
|
}
|
||||||
|
|
||||||
submit() {
|
submit() {
|
||||||
const studentRegistration: StudentRegistration = {
|
const studentRegistration: StudentRegistration = {
|
||||||
// First Form Group
|
// First Form Group
|
||||||
|
@ -113,7 +117,7 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
birthdate: this.firstFormGroup.get('birthdate')?.value,
|
birthdate: this.firstFormGroup.get('birthdate')?.value,
|
||||||
postalCode: this.firstFormGroup.get('postalCode')?.value,
|
postalCode: this.firstFormGroup.get('postalCode')?.value,
|
||||||
address: this.firstFormGroup.get('address')?.value,
|
address: this.firstFormGroup.get('address')?.value,
|
||||||
phone: this.firstFormGroup.get('phone')?.value,
|
phone: this.removeWhiteSpace(this.firstFormGroup.get('phone')?.value),
|
||||||
email: this.firstFormGroup.get('email')?.value,
|
email: this.firstFormGroup.get('email')?.value,
|
||||||
|
|
||||||
// Second Form Group
|
// Second Form Group
|
||||||
|
|
|
@ -23,6 +23,10 @@ $my-theme: mat.define-light-theme((
|
||||||
.mdc-button {
|
.mdc-button {
|
||||||
background: rgba(255, 255, 255, 0.82) !important;
|
background: rgba(255, 255, 255, 0.82) !important;
|
||||||
}
|
}
|
||||||
|
.mat-horizontal-stepper-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
alioezdemir marked this conversation as resolved
Outdated
it-as
commented
Bitte keinen auskommentierten Code committen Bitte keinen auskommentierten Code committen
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
Loading…
Reference in New Issue
Hint muss hier DD.MM.YYYY sein