Merge Anmeldeformular into main #21

Merged
it-as merged 23 commits from Anmeldeformular into main 2024-04-26 14:40:21 +02:00
5 changed files with 73 additions and 20 deletions
Showing only changes of commit 68695cd3e8 - Show all commits

View File

@ -15,11 +15,13 @@
"@angular/core": "^17.2.4",
"@angular/forms": "^17.2.4",
"@angular/material": "^17.2.2",
"@angular/material-moment-adapter": "^17.2.2",
"@angular/platform-browser": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"moment": "^2.30.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.4"
@ -1196,6 +1198,19 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/material-moment-adapter": {
"version": "17.2.2",
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz",
"integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/core": "^17.0.0 || ^18.0.0",
"@angular/material": "17.2.2",
"moment": "^2.18.1"
}
},
"node_modules/@angular/platform-browser": {
"version": "17.2.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
@ -14815,6 +14830,14 @@
"node": ">=10"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"engines": {
"node": "*"
}
},
"node_modules/mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@ -20054,6 +20077,14 @@
"tslib": "^2.3.0"
}
},
"@angular/material-moment-adapter": {
"version": "17.2.2",
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz",
"integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==",
"requires": {
"tslib": "^2.3.0"
}
},
"@angular/platform-browser": {
"version": "17.2.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
@ -30138,6 +30169,11 @@
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true
},
"moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
},
"mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

View File

@ -21,11 +21,13 @@
"@angular/core": "^17.2.4",
"@angular/forms": "^17.2.4",
"@angular/material": "^17.2.2",
"@angular/material-moment-adapter": "^17.2.2",
"@angular/platform-browser": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4",
"@angular/router": "^17.2.4",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"moment": "^2.30.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.4"

View File

@ -20,7 +20,7 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
import {MY_DATE_FORMAT, StudentRegisterComponent} from './components/students/student-register/student-register.component';
import { MatStepperModule } from '@angular/material/stepper';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
@ -29,6 +29,8 @@ import { MatSelectModule } from '@angular/material/select';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
@NgModule({
declarations: [
@ -67,7 +69,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
MatTooltipModule,
MatIconModule,
],
providers: [],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
],
bootstrap: [AppComponent],
})
export class AppModule {}

View File

@ -6,7 +6,7 @@
<!-- Step 1-->
<mat-step [stepControl]="firstFormGroup" class="firstStep">
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
<ng-template matStepLabel>Personal Information</ng-template>
<ng-template matStepLabel>Persönliche Informationen</ng-template>
<div class="leftContainer">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
alioezdemir marked this conversation as resolved Outdated

Placeholder auf Deutsch

Placeholder auf Deutsch
@ -18,7 +18,7 @@
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Surname</mat-label>
<mat-label>Nachname</mat-label>
alioezdemir marked this conversation as resolved Outdated

Placeholder auf Deutsch

Placeholder auf Deutsch
<input
matInput
formControlName="lastName"
@ -27,13 +27,13 @@
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Birthdate</mat-label>
<mat-label>Geburtstag</mat-label>
<input
matInput
alioezdemir marked this conversation as resolved Outdated

Hint muss hier DD.MM.YYYY sein

Hint muss hier DD.MM.YYYY sein
[matDatepicker]="birthdatePicker"
formControlName="birthdate"
required />
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-hint>MM.DD.YYYY</mat-hint>
<mat-datepicker-toggle
matSuffix
[for]="birthdatePicker"></mat-datepicker-toggle>
@ -43,44 +43,44 @@
</mat-form-field>
<mat-form-field>
<mat-label>Gender</mat-label>
<mat-label>Geschlecht</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-option value="male">männlich</mat-option>
<mat-option value="female">weiblich</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>
<mat-label>Adresse</mat-label>
<input matInput formControlName="address" required />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Postal Code</mat-label>
<mat-label>Postleitzahl</mat-label>
<input matInput formControlName="postalCode" required />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Phone</mat-label>
<mat-label>Telefon</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-error>Ungültige E-Mail Adresse</mat-error>
</mat-form-field>
</div>
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperPrevious class="backButton">Zurück</button>
<button
mat-button
matStepperNext
[disabled]="firstFormGroup.status == 'INVALID'">
Next
Weiter
</button>
</div>
</mat-step>
@ -128,12 +128,12 @@
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperPrevious class="backButton">Zurück</button>
<button
mat-button
matStepperNext
[disabled]="secondFormGroup.status == 'INVALID'">
Next
Weiter
</button>
</div>
</mat-step>
@ -168,13 +168,13 @@
</form>
<div class="buttonsContainer">
<button mat-button matStepperPrevious class="backButton">Back</button>
<button mat-button matStepperPrevious class="backButton">Zurück</button>
<button
mat-button
matStepperNext
[disabled]="thirdFormGroup.status == 'INVALID'"
>
Submit
Fertig
</button>
</div>
</mat-step>

View File

@ -1,6 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export const MY_DATE_FORMAT= {
parse: {
dateInput: 'DD.MM.YYYY'
},
display: {
dateInput: 'DD.MM.YYYY'
}
};
@Component({
selector: 'li-student-register',
templateUrl: './student-register.component.html',