Dependency Day + Basic Setup #3
|
@ -27,6 +27,8 @@ import {MatButtonModule} from "@angular/material/button";
|
|||
import {MatRadioModule} from "@angular/material/radio";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
import {MatCheckboxModule} from "@angular/material/checkbox";
|
||||
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -61,6 +63,9 @@ import {MatIconModule} from "@angular/material/icon";
|
|||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule,
|
||||
MatCheckboxModule,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
@ -3,7 +3,49 @@
|
|||
<!--</button>-->
|
||||
|
||||
<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-->
|
||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||
<form [formGroup]="firstFormGroup" class="formContainer">
|
||||
|
@ -38,7 +80,6 @@
|
|||
<mat-option value="divers">Divers</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div class="rightContainer">
|
||||
|
||||
|
@ -69,45 +110,13 @@
|
|||
</div>
|
||||
</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–>-->
|
||||
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
||||
<!-- <form [formGroup]="firstFormGroup">-->
|
||||
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
|
||||
<!-- <div class="formContainer">-->
|
||||
<!-- <div class="formContainer1 width50">-->
|
||||
<!-- <div class="leftContainer">-->
|
||||
|
||||
<!-- <mat-form-field appearance="fill">-->
|
||||
|
|
|
@ -23,21 +23,29 @@ button {
|
|||
color: white;
|
||||
background-color: #1576d5;
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
width: 50%;
|
||||
.flexContainerRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&.width50 {
|
||||
width: 50%;
|
||||
}
|
||||
&.width20 {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.formContainer2 {
|
||||
width: 30%;
|
||||
.flexContainerColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
&.width30 {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leftContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -48,6 +56,20 @@ button {
|
|||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
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;
|
||||
secondFormGroup!: FormGroup;
|
||||
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) {}
|
||||
|
||||
|
@ -29,6 +35,8 @@ export class StudentRegisterComponent implements OnInit {
|
|||
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||
bic: ['', Validators.required],
|
||||
nameOfFinancialInstitute: ['', Validators.required],
|
||||
amount: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||
checked: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue