Merge Anmeldeformular into main #21
|
@ -2,7 +2,7 @@
|
|||
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
|
||||
<!--</button>-->
|
||||
|
||||
<mat-stepper linear #stepper>
|
||||
<mat-stepper>
|
||||
<!-- Step 1-->
|
||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
||||
|
@ -87,8 +87,10 @@
|
|||
|
||||
<!-- Step 2-->
|
||||
<mat-step [stepControl]="secondFormGroup">
|
||||
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
|
||||
<form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
|
||||
<ng-template matStepLabel>Bank Informationen</ng-template>
|
||||
<div class="flexContainerRow">
|
||||
<div class="leftContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Kontoinhaber</mat-label>
|
||||
<input matInput formControlName="accountHolder" required />
|
||||
|
@ -98,7 +100,9 @@
|
|||
<mat-label>IBAN</mat-label>
|
||||
<input matInput formControlName="iban" required />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="rightContainer">
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>BIC</mat-label>
|
||||
<input matInput formControlName="bic" required />
|
||||
|
@ -108,18 +112,12 @@
|
|||
<mat-label>Name der Bank</mat-label>
|
||||
<input matInput formControlName="nameOfFinancialInstitute" required />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flexContainerRow width20">
|
||||
<mat-checkbox formControlName="einzugsermaechtigung" required
|
||||
>Einzugsermächtigung</mat-checkbox
|
||||
>
|
||||
<mat-icon
|
||||
aria-hidden="false"
|
||||
matTooltip="{{ infoText }}"
|
||||
matTooltipPosition="right"
|
||||
>info</mat-icon
|
||||
>
|
||||
<div class="flexContainerColumn">
|
||||
<textarea cols="30" rows="7" readonly>{{infoTextEinzugermaechtigung}}</textarea>
|
||||
<mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
@ -136,30 +134,21 @@
|
|||
|
||||
<!-- Step 3-->
|
||||
<mat-step>
|
||||
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width30">
|
||||
<ng-template matStepLabel>Consent</ng-template>
|
||||
<div class="flexContainerRow width20">
|
||||
<form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
|
||||
<ng-template matStepLabel>Einwilligung</ng-template>
|
||||
<div class="flexContainerColumn">
|
||||
<textarea cols="30" rows="10" readonly>{{infoTextEinwilligungserklaerung}}</textarea>
|
||||
<mat-checkbox formControlName="einwilligung" required
|
||||
>Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
|
||||
personenbezogenen Daten
|
||||
</mat-checkbox>
|
||||
<mat-icon
|
||||
aria-hidden="false"
|
||||
matTooltip="{{ infoTextEinwilligungserklaerung }}"
|
||||
matTooltipPosition="right"
|
||||
>info</mat-icon
|
||||
>
|
||||
</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
|
||||
>Einverständniserklärung zur Nutzung von Bild- und Videomaterial
|
||||
</mat-checkbox>
|
||||
<mat-icon
|
||||
aria-hidden="false"
|
||||
matTooltip="{{ infoTextEinverstaendniserklaerung }}"
|
||||
matTooltipPosition="right"
|
||||
>info</mat-icon
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
@ -174,4 +163,5 @@
|
|||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
||||
</mat-stepper>
|
||||
|
|
|
@ -27,13 +27,13 @@ button {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&.width50 {
|
||||
}
|
||||
.width50 {
|
||||
width: 50%;
|
||||
}
|
||||
&.width20 {
|
||||
.width20 {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.flexContainerColumn {
|
||||
display: flex;
|
||||
|
@ -63,3 +63,10 @@ mat-icon {
|
|||
color: white;
|
||||
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'
|
||||
},
|
||||
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;
|
||||
secondFormGroup!: FormGroup;
|
||||
thirdFormGroup!: FormGroup;
|
||||
infoText =
|
||||
infoTextEinzugermaechtigung =
|
||||
'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' +
|
||||
'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' +
|
||||
|
|
Loading…
Reference in New Issue