Dependency Day + Basic Setup #3
|
@ -27,6 +27,8 @@ import {MatButtonModule} from "@angular/material/button";
|
||||||
import {MatRadioModule} from "@angular/material/radio";
|
import {MatRadioModule} from "@angular/material/radio";
|
||||||
import {MatSelectModule} from "@angular/material/select";
|
import {MatSelectModule} from "@angular/material/select";
|
||||||
import {MatIconModule} from "@angular/material/icon";
|
import {MatIconModule} from "@angular/material/icon";
|
||||||
|
import {MatCheckboxModule} from "@angular/material/checkbox";
|
||||||
|
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -61,6 +63,9 @@ import {MatIconModule} from "@angular/material/icon";
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
MatRadioModule,
|
MatRadioModule,
|
||||||
MatSelectModule,
|
MatSelectModule,
|
||||||
|
MatCheckboxModule,
|
||||||
|
MatTooltipModule,
|
||||||
|
MatIconModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -3,7 +3,49 @@
|
||||||
<!--</button>-->
|
<!--</button>-->
|
||||||
|
|
||||||
<mat-stepper linear #stepper>
|
<mat-stepper linear #stepper>
|
||||||
|
<!-- Step 2-->
|
||||||
|
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
||||||
|
<form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
|
||||||
|
<ng-template matStepLabel>Banking Information</ng-template>
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Account Holder</mat-label>
|
||||||
|
<input matInput formControlName="accountHolder"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>IBAN</mat-label>
|
||||||
|
<input matInput formControlName="iban" required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>BIC</mat-label>
|
||||||
|
<input matInput formControlName="bic"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Name of Financial Institute</mat-label>
|
||||||
|
<input matInput formControlName="nameOfFinancialInstitute"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Amount in €/Month</mat-label>
|
||||||
|
<input matInput formControlName="amount" required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<div class="flexContainerRow width20">
|
||||||
|
<mat-checkbox formControlName="checked" required>Einzugsermächtigung</mat-checkbox>
|
||||||
|
<mat-icon aria-hidden="false" aria-label="Example home icon" matTooltip="{{infoText}}" matTooltipPosition="right">info</mat-icon>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="buttonsContainer">
|
||||||
|
<button mat-button matStepperPrevious class="backButton">Back</button>
|
||||||
|
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
|
||||||
|
</div>
|
||||||
|
</mat-step>
|
||||||
<!-- Step 1-->
|
<!-- Step 1-->
|
||||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||||
<form [formGroup]="firstFormGroup" class="formContainer">
|
<form [formGroup]="firstFormGroup" class="formContainer">
|
||||||
|
@ -38,7 +80,6 @@
|
||||||
<mat-option value="divers">Divers</mat-option>
|
<mat-option value="divers">Divers</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rightContainer">
|
<div class="rightContainer">
|
||||||
|
|
||||||
|
@ -69,45 +110,13 @@
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
<!-- Step 2-->
|
|
||||||
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
|
||||||
<form [formGroup]="secondFormGroup" class="formContainer2">
|
|
||||||
<ng-template matStepLabel>Banking Information</ng-template>
|
|
||||||
<mat-form-field appearance="fill">
|
|
||||||
<mat-label>Account Holder</mat-label>
|
|
||||||
<input matInput formControlName="accountHolder"
|
|
||||||
required>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
|
||||||
<mat-label>IBAN</mat-label>
|
|
||||||
<input matInput formControlName="iban" required>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
|
||||||
<mat-label>BIC</mat-label>
|
|
||||||
<input matInput formControlName="bic"
|
|
||||||
required>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
|
||||||
<mat-label>Name of Financial Institute</mat-label>
|
|
||||||
<input matInput formControlName="nameOfFinancialInstitute"
|
|
||||||
required>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="buttonsContainer">
|
|
||||||
<button mat-button matStepperPrevious class="backButton">Back</button>
|
|
||||||
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
|
|
||||||
</div>
|
|
||||||
</mat-step>
|
|
||||||
|
|
||||||
<!-- <!– Step 1–>-->
|
<!-- <!– Step 1–>-->
|
||||||
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
||||||
<!-- <form [formGroup]="firstFormGroup">-->
|
<!-- <form [formGroup]="firstFormGroup">-->
|
||||||
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
|
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
|
||||||
<!-- <div class="formContainer">-->
|
<!-- <div class="formContainer1 width50">-->
|
||||||
<!-- <div class="leftContainer">-->
|
<!-- <div class="leftContainer">-->
|
||||||
|
|
||||||
<!-- <mat-form-field appearance="fill">-->
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
|
|
@ -23,21 +23,29 @@ button {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #1576d5;
|
background-color: #1576d5;
|
||||||
}
|
}
|
||||||
|
.flexContainerRow {
|
||||||
.formContainer {
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
&.width50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
&.width20 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.formContainer2 {
|
.flexContainerColumn {
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
&.width30 {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.leftContainer {
|
.leftContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -48,6 +56,20 @@ button {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backButton {
|
.backButton {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
color: white;
|
||||||
|
scale: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-checkbox {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -11,6 +11,12 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
firstFormGroup!: FormGroup;
|
firstFormGroup!: FormGroup;
|
||||||
secondFormGroup!: FormGroup;
|
secondFormGroup!: FormGroup;
|
||||||
isEditable = false;
|
isEditable = false;
|
||||||
|
infoText = "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"+
|
||||||
|
"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\n" +
|
||||||
|
"wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht."
|
||||||
|
|
||||||
constructor(private _formBuilder: FormBuilder) {}
|
constructor(private _formBuilder: FormBuilder) {}
|
||||||
|
|
||||||
|
@ -29,6 +35,8 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||||
bic: ['', Validators.required],
|
bic: ['', Validators.required],
|
||||||
nameOfFinancialInstitute: ['', Validators.required],
|
nameOfFinancialInstitute: ['', Validators.required],
|
||||||
|
amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||||
|
checked: ['', Validators.required],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue