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 +100 -48
5 changed files with 100 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 155fcde278 - Show all commits

3
frontend/src/app/app.module.ts
View File

@ -26,6 +26,7 @@ import {MatInputModule} from "@angular/material/input";
import {MatButtonModule} from "@angular/material/button"; 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";
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -59,7 +60,7 @@ import {MatSelectModule} from "@angular/material/select";
MatInputModule, MatInputModule,
MatButtonModule, MatButtonModule,
MatRadioModule, MatRadioModule,
MatSelectModule MatSelectModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

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

@ -3,6 +3,7 @@
<!--</button>--> <!--</button>-->
<mat-stepper linear #stepper> <mat-stepper linear #stepper>
<!-- 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>
@ -11,54 +12,70 @@
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="firstName" placeholder="First name" required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Surname</mat-label> <mat-label>Surname</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="lastName" placeholder="Last name" required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Birthdate</mat-label> <mat-label>Birthdate</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <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-form-field> <mat-form-field>
<mat-label>Gender</mat-label> <mat-label>Gender</mat-label>
<mat-select> <mat-select>
<mat-option>Male</mat-option> <mat-option value="male">Male</mat-option>
<mat-option value="valid">Female</mat-option> <mat-option value="female">Female</mat-option>
<mat-option value="invalid">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">
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Address</mat-label> <mat-label>Address</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="address" required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Postal Code</mat-label> <mat-label>Postal Code</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="postalCode" required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Phone</mat-label> <mat-label>Phone</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="phone" required>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>E-Mail</mat-label> <mat-label>E-Mail</mat-label>
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required> <input matInput formControlName="email" required>
<mat-error>Invalid E-Mail Address</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </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
<div> <div>
<button mat-button matStepperNext>Next</button> <button (click)="onClick()">test</button>
</div>
<div>
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>
</div> </div>
</form> </form>
</mat-step> </mat-step>
<!-- Step 2-->
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable"> <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
<form [formGroup]="secondFormGroup"> <form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
@ -67,12 +84,17 @@
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY" <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
required> required>
</mat-form-field> </mat-form-field>
<div>
<button (click)="onClick()">test2</button>
</div>
<div> <div>
<button mat-button matStepperPrevious>Back</button> <button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button> <button mat-button matStepperNext>Next</button>
</div> </div>
</form> </form>
</mat-step> </mat-step>
<!-- Step 3-->
<mat-step> <mat-step>
<ng-template matStepLabel>Done</ng-template> <ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p> <p>You are now done.</p>

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

@ -41,3 +41,4 @@ button {
flex-direction: column; flex-direction: column;
width: 45%; width: 45%;
} }

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

@ -16,10 +16,20 @@ export class StudentRegisterComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.firstFormGroup = this._formBuilder.group({ this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required], firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
lastName: ['', Validators.required],
birthdate: ['', Validators.required],
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
address: ['', Validators.required],
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
email: ['', [Validators.required, Validators.email]],
}); });
this.secondFormGroup = this._formBuilder.group({ this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required], secondCtrl: ['', Validators.required],
}); });
} }
onClick() {
console.log(this.firstFormGroup)
}
} }

88
frontend/src/styles.scss
View File

@ -26,45 +26,63 @@ body {
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;
} }
.mat-calendar-body-cell-content { .mat-form-field-subscript-wrapper {
background-color: #1861ac; font-size: 95%;
color: #fff;
font-weight: bold;
font-size: 2em;
} }
.mat-calendar-table { // customize datepicker
border: 1px solid white; //.mat-datepicker-content-container {
} // background:transparent;
//}
//.mat-datepicker-content {
// color: black;
//}
//.mat-calendar-body-cell-content, .mat-calendar-body-label{
// color: black;
// }
.mat-calendar-table-header {
tr {
th {
padding-top: 2em;
}
th.mat-calendar-table-header-divider { //
padding: 0; //.mat-calendar-body-cell-content {
} // background-color: #1861ac;
} // color: #fff;
} // font-weight: bold;
// font-size: 2em;
.mat-calendar-controls, //}
.mat-calendar-table-header, //
.mat-calendar-body-label { //.mat-calendar-table {
color: #fff; // border: 1px solid white;
font-size: 2em; //}
} //
//.mat-calendar-table-header {
.mat-calendar-previous-button, //
.mat-calendar-next-button, // tr {
.mat-calendar-period-button { // th {
font-size: 2em; // padding-top: 2em;
height: 2em; // }
color: #fff; //
background-color: #1b6ec2; // th.mat-calendar-table-header-divider {
border-color: #1861ac; // padding: 0;
} // }
// }
//}
//
//.mat-calendar-controls,
//.mat-calendar-table-header,
//.mat-calendar-body-label {
// color: #fff;
// font-size: 2em;
//}
//
//.mat-calendar-previous-button,
//.mat-calendar-next-button,
//.mat-calendar-period-button {
// font-size: 2em;
// height: 2em;
// color: #fff;
// background-color: #1b6ec2;
// border-color: #1861ac;
//}
html, body { height: 100%; } html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }