it-as
/
li-dance-backoffice
1
0
Fork 0
Code Issues 11 Pull Requests Projects 1 Releases Wiki Activity

WIP: Anmeldeformular #16

Closed
alioezdemir wants to merge 9 commits from Anmeldeformular into main
pull from: Anmeldeformular
merge into: it-as:main
Conversation 0 Commits 9 Files Changed 8 +117 -27
3 changed files with 117 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2ffddafe9a - Show all commits

122
frontend/src/app/components/students/student-register/student-register.component.html
View File

@ -3,11 +3,11 @@
<!--</button>-->
<mat-stepper linear #stepper>
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup">
<form [formGroup]="firstFormGroup" class="formContainer">
<ng-template matStepLabel>Personal Information</ng-template>
<div class="formContainer">
<div class="leftContainer">
<mat-form-field appearance="fill">
@ -63,37 +63,115 @@
<mat-error>Invalid E-Mail Address</mat-error>
</mat-form-field>
</div>
</div>
<div>
<button (click)="onClick()">test</button>
</div>
<div>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>
</div>
</form>
<div>
igorpropisnov commented 2024-03-12 20:58:38 +01:00
Review
Copy Link

Wir brauchen hier DE Format. DD.MM.YYYY

Wir brauchen hier DE Format. DD.MM.YYYY
<button mat-button matStepperNext [disabled]="secondFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
</div>
</mat-step>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<form [formGroup]="secondFormGroup" class="formContainer2">
<ng-template matStepLabel>Banking Information</ng-template>
<mat-form-field appearance="fill">
<mat-label>Address</mat-label>
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
<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>
<div>
<button (click)="onClick()">test2</button>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</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>
<!-- &lt;!&ndash; Step 1&ndash;&gt;-->
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
<!-- <form [formGroup]="firstFormGroup">-->
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
<!-- <div class="formContainer">-->
<!-- <div class="leftContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Name</mat-label>-->
<!-- <input matInput formControlName="firstName" placeholder="First name" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Surname</mat-label>-->
<!-- <input matInput formControlName="lastName" placeholder="Last name" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Birthdate</mat-label>-->
<!-- <input matInput [matDatepicker]="birthdatePicker" formControlName="birthdate" required>-->
<!-- <mat-hint>MM/DD/YYYY</mat-hint>-->
<!-- <mat-datepicker-toggle matSuffix [for]="birthdatePicker"></mat-datepicker-toggle>-->
<!-- <mat-datepicker #birthdatePicker startView="multi-year"></mat-datepicker>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field>-->
<!-- <mat-label>Gender</mat-label>-->
<!-- <mat-select>-->
<!-- <mat-option value="male">Male</mat-option>-->
<!-- <mat-option value="female">Female</mat-option>-->
<!-- <mat-option value="divers">Divers</mat-option>-->
<!-- </mat-select>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="rightContainer">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Address</mat-label>-->
<!-- <input matInput formControlName="address" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Postal Code</mat-label>-->
<!-- <input matInput formControlName="postalCode" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Phone</mat-label>-->
<!-- <input matInput formControlName="phone" required>-->
<!-- </mat-form-field>-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>E-Mail</mat-label>-->
<!-- <input matInput formControlName="email" required>-->
<!-- <mat-error>Invalid E-Mail Address</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>-->
<!-- </div>-->
<!-- </form>-->
<!-- </mat-step>-->
<!-- Step 3-->
<mat-step>
<ng-template matStepLabel>Done</ng-template>

13
frontend/src/app/components/students/student-register/student-register.component.scss
View File

@ -29,8 +29,15 @@ button {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.formContainer2 {
width: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.leftContainer {
display: flex;
flex-direction: column;
@ -41,4 +48,6 @@ button {
flex-direction: column;
width: 45%;
}
.backButton {
margin-right: 10px;
}

9
frontend/src/app/components/students/student-register/student-register.component.ts
View File

@ -16,16 +16,19 @@ export class StudentRegisterComponent implements OnInit {
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
firstName: ['', Validators.required],
lastName: ['', Validators.required],
birthdate: ['', Validators.required],
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
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],
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
email: ['', [Validators.required, Validators.email]],
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required],
accountHolder: ['', Validators.required],
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
bic: ['', Validators.required],
nameOfFinancialInstitute: ['', Validators.required],
});
}