Merge Anmeldeformular into main #21
|
@ -2,7 +2,7 @@
|
||||||
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
|
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
|
||||||
<!--</button>-->
|
<!--</button>-->
|
||||||
|
|
||||||
<mat-stepper linear #stepper>
|
<mat-stepper>
|
||||||
<!-- Step 1-->
|
<!-- Step 1-->
|
||||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||||
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
||||||
|
@ -87,8 +87,10 @@
|
||||||
|
|
||||||
<!-- Step 2-->
|
<!-- Step 2-->
|
||||||
<mat-step [stepControl]="secondFormGroup">
|
<mat-step [stepControl]="secondFormGroup">
|
||||||
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
|
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
|
||||||
<ng-template matStepLabel>Bank Informationen</ng-template>
|
<ng-template matStepLabel>Bank Informationen</ng-template>
|
||||||
|
<div class="flexContainerRow">
|
||||||
|
<div class="leftContainer">
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Kontoinhaber</mat-label>
|
<mat-label>Kontoinhaber</mat-label>
|
||||||
<input matInput formControlName="accountHolder" required />
|
<input matInput formControlName="accountHolder" required />
|
||||||
|
@ -98,7 +100,9 @@
|
||||||
<mat-label>IBAN</mat-label>
|
<mat-label>IBAN</mat-label>
|
||||||
<input matInput formControlName="iban" required />
|
<input matInput formControlName="iban" required />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rightContainer">
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>BIC</mat-label>
|
<mat-label>BIC</mat-label>
|
||||||
<input matInput formControlName="bic" required />
|
<input matInput formControlName="bic" required />
|
||||||
|
@ -108,18 +112,12 @@
|
||||||
<mat-label>Name der Bank</mat-label>
|
<mat-label>Name der Bank</mat-label>
|
||||||
<input matInput formControlName="nameOfFinancialInstitute" required />
|
<input matInput formControlName="nameOfFinancialInstitute" required />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexContainerColumn">
|
||||||
<div class="flexContainerRow width20">
|
<textarea cols="30" rows="7" readonly>{{infoTextEinzugermaechtigung}}</textarea>
|
||||||
<mat-checkbox formControlName="einzugsermaechtigung" required
|
<mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox>
|
||||||
>Einzugsermächtigung</mat-checkbox
|
|
||||||
>
|
|
||||||
<mat-icon
|
|
||||||
aria-hidden="false"
|
|
||||||
matTooltip="{{ infoText }}"
|
|
||||||
matTooltipPosition="right"
|
|
||||||
>info</mat-icon
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
@ -136,30 +134,21 @@
|
||||||
|
|
||||||
<!-- Step 3-->
|
<!-- Step 3-->
|
||||||
<mat-step>
|
<mat-step>
|
||||||
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width30">
|
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
|
||||||
<ng-template matStepLabel>Consent</ng-template>
|
<ng-template matStepLabel>Einwilligung</ng-template>
|
||||||
<div class="flexContainerRow width20">
|
<div class="flexContainerColumn">
|
||||||
|
<textarea cols="30" rows="10" readonly>{{infoTextEinwilligungserklaerung}}</textarea>
|
||||||
<mat-checkbox formControlName="einwilligung" required
|
<mat-checkbox formControlName="einwilligung" required
|
||||||
>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
|
>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
|
||||||
personenbezogenen Daten
|
personenbezogenen Daten
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
<mat-icon
|
|
||||||
aria-hidden="false"
|
|
||||||
matTooltip="{{ infoTextEinwilligungserklaerung }}"
|
|
||||||
matTooltipPosition="right"
|
|
||||||
>info</mat-icon
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flexContainerRow width20">
|
<br style="margin-bottom: 20px;">
|
||||||
|
<div class="flexContainerColumn">
|
||||||
|
<textarea cols="30" rows="10" readonly>{{infoTextEinverstaendniserklaerung}}</textarea>
|
||||||
<mat-checkbox formControlName="einverstaendniserklaerung" required
|
<mat-checkbox formControlName="einverstaendniserklaerung" required
|
||||||
>Einverständniserklärung zur Nutzung von Bild- und Videomaterial
|
>Einverständniserklärung zur Nutzung von Bild- und Videomaterial
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
<mat-icon
|
|
||||||
aria-hidden="false"
|
|
||||||
matTooltip="{{ infoTextEinverstaendniserklaerung }}"
|
|
||||||
matTooltipPosition="right"
|
|
||||||
>info</mat-icon
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
@ -174,4 +163,5 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
</mat-stepper>
|
</mat-stepper>
|
||||||
|
|
|
@ -27,12 +27,12 @@ button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
&.width50 {
|
}
|
||||||
|
.width50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
&.width20 {
|
.width20 {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexContainerColumn {
|
.flexContainerColumn {
|
||||||
|
@ -63,3 +63,10 @@ mat-icon {
|
||||||
color: white;
|
color: white;
|
||||||
scale: 80%;
|
scale: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
padding: 5px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
|
@ -7,7 +7,10 @@ export const MY_DATE_FORMAT= {
|
||||||
dateInput: 'DD.MM.YYYY'
|
dateInput: 'DD.MM.YYYY'
|
||||||
},
|
},
|
||||||
display: {
|
display: {
|
||||||
dateInput: 'DD.MM.YYYY'
|
dateInput: 'DD.MM.YYYY',
|
||||||
|
monthYearLabel: 'MMM YYYY',
|
||||||
|
dateA11yLabel: 'YYYY-MM-DD',
|
||||||
|
monthYearA11yLabel: 'MMMM YYYY'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -21,7 +24,7 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
firstFormGroup!: FormGroup;
|
firstFormGroup!: FormGroup;
|
||||||
secondFormGroup!: FormGroup;
|
secondFormGroup!: FormGroup;
|
||||||
thirdFormGroup!: FormGroup;
|
thirdFormGroup!: FormGroup;
|
||||||
infoText =
|
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-\n' +
|
||||||
'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' +
|
'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' +
|
||||||
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +
|
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +
|
||||||
|
|
Loading…
Reference in New Issue