Merge Anmeldeformular into main #21
|
@ -15,11 +15,13 @@
|
||||||
"@angular/core": "^17.2.4",
|
"@angular/core": "^17.2.4",
|
||||||
"@angular/forms": "^17.2.4",
|
"@angular/forms": "^17.2.4",
|
||||||
"@angular/material": "^17.2.2",
|
"@angular/material": "^17.2.2",
|
||||||
|
"@angular/material-moment-adapter": "^17.2.2",
|
||||||
"@angular/platform-browser": "^17.2.4",
|
"@angular/platform-browser": "^17.2.4",
|
||||||
"@angular/platform-browser-dynamic": "^17.2.4",
|
"@angular/platform-browser-dynamic": "^17.2.4",
|
||||||
"@angular/router": "^17.2.4",
|
"@angular/router": "^17.2.4",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"rxjs": "~7.4.0",
|
"rxjs": "~7.4.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.14.4"
|
"zone.js": "~0.14.4"
|
||||||
|
@ -1196,6 +1198,19 @@
|
||||||
"rxjs": "^6.5.3 || ^7.4.0"
|
"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": {
|
"node_modules/@angular/platform-browser": {
|
||||||
"version": "17.2.4",
|
"version": "17.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
|
||||||
|
@ -14815,6 +14830,14 @@
|
||||||
"node": ">=10"
|
"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": {
|
"node_modules/mrmime": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||||
|
@ -20054,6 +20077,14 @@
|
||||||
"tslib": "^2.3.0"
|
"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": {
|
"@angular/platform-browser": {
|
||||||
"version": "17.2.4",
|
"version": "17.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz",
|
||||||
|
@ -30138,6 +30169,11 @@
|
||||||
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
|
||||||
"dev": true
|
"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": {
|
"mrmime": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||||
|
|
|
@ -21,11 +21,13 @@
|
||||||
"@angular/core": "^17.2.4",
|
"@angular/core": "^17.2.4",
|
||||||
"@angular/forms": "^17.2.4",
|
"@angular/forms": "^17.2.4",
|
||||||
"@angular/material": "^17.2.2",
|
"@angular/material": "^17.2.2",
|
||||||
|
"@angular/material-moment-adapter": "^17.2.2",
|
||||||
"@angular/platform-browser": "^17.2.4",
|
"@angular/platform-browser": "^17.2.4",
|
||||||
"@angular/platform-browser-dynamic": "^17.2.4",
|
"@angular/platform-browser-dynamic": "^17.2.4",
|
||||||
"@angular/router": "^17.2.4",
|
"@angular/router": "^17.2.4",
|
||||||
"bootstrap": "^5.3.3",
|
"bootstrap": "^5.3.3",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
|
"moment": "^2.30.1",
|
||||||
"rxjs": "~7.4.0",
|
"rxjs": "~7.4.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.14.4"
|
"zone.js": "~0.14.4"
|
||||||
|
|
|
@ -20,7 +20,7 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis
|
||||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
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 { MatStepperModule } from '@angular/material/stepper';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
@ -29,6 +29,8 @@ 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 { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
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({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -67,7 +69,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
MatTooltipModule,
|
MatTooltipModule,
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [
|
||||||
|
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
||||||
|
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
||||||
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
})
|
})
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<!-- Step 1-->
|
<!-- Step 1-->
|
||||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||||
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
<form [formGroup]="firstFormGroup" class="flexContainerRow width50">
|
||||||
<ng-template matStepLabel>Personal Information</ng-template>
|
<ng-template matStepLabel>Persönliche Informationen</ng-template>
|
||||||
<div class="leftContainer">
|
<div class="leftContainer">
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Name</mat-label>
|
<mat-label>Name</mat-label>
|
||||||
alioezdemir marked this conversation as resolved
Outdated
|
|||||||
|
@ -18,7 +18,7 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Surname</mat-label>
|
<mat-label>Nachname</mat-label>
|
||||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Placeholder auf Deutsch Placeholder auf Deutsch
|
|||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
formControlName="lastName"
|
formControlName="lastName"
|
||||||
|
@ -27,13 +27,13 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Birthdate</mat-label>
|
<mat-label>Geburtstag</mat-label>
|
||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Hint muss hier DD.MM.YYYY sein Hint muss hier DD.MM.YYYY sein
|
|||||||
[matDatepicker]="birthdatePicker"
|
[matDatepicker]="birthdatePicker"
|
||||||
formControlName="birthdate"
|
formControlName="birthdate"
|
||||||
required />
|
required />
|
||||||
<mat-hint>MM/DD/YYYY</mat-hint>
|
<mat-hint>MM.DD.YYYY</mat-hint>
|
||||||
<mat-datepicker-toggle
|
<mat-datepicker-toggle
|
||||||
matSuffix
|
matSuffix
|
||||||
[for]="birthdatePicker"></mat-datepicker-toggle>
|
[for]="birthdatePicker"></mat-datepicker-toggle>
|
||||||
|
@ -43,44 +43,44 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-label>Gender</mat-label>
|
<mat-label>Geschlecht</mat-label>
|
||||||
<mat-select>
|
<mat-select>
|
||||||
<mat-option value="male">Male</mat-option>
|
<mat-option value="male">männlich</mat-option>
|
||||||
<mat-option value="female">Female</mat-option>
|
<mat-option value="female">weiblich</mat-option>
|
||||||
<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">
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Address</mat-label>
|
<mat-label>Adresse</mat-label>
|
||||||
<input matInput formControlName="address" 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>Postleitzahl</mat-label>
|
||||||
<input matInput formControlName="postalCode" 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>Telefon</mat-label>
|
||||||
<input matInput formControlName="phone" 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="email" required />
|
<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>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div class="buttonsContainer">
|
<div class="buttonsContainer">
|
||||||
<button mat-button matStepperPrevious class="backButton">Back</button>
|
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||||
<button
|
<button
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
[disabled]="firstFormGroup.status == 'INVALID'">
|
[disabled]="firstFormGroup.status == 'INVALID'">
|
||||||
Next
|
Weiter
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
@ -128,12 +128,12 @@
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="buttonsContainer">
|
<div class="buttonsContainer">
|
||||||
<button mat-button matStepperPrevious class="backButton">Back</button>
|
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||||
<button
|
<button
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
[disabled]="secondFormGroup.status == 'INVALID'">
|
[disabled]="secondFormGroup.status == 'INVALID'">
|
||||||
Next
|
Weiter
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
@ -168,13 +168,13 @@
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="buttonsContainer">
|
<div class="buttonsContainer">
|
||||||
<button mat-button matStepperPrevious class="backButton">Back</button>
|
<button mat-button matStepperPrevious class="backButton">Zurück</button>
|
||||||
<button
|
<button
|
||||||
mat-button
|
mat-button
|
||||||
matStepperNext
|
matStepperNext
|
||||||
[disabled]="thirdFormGroup.status == 'INVALID'"
|
[disabled]="thirdFormGroup.status == 'INVALID'"
|
||||||
>
|
>
|
||||||
Submit
|
Fertig
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
|
@ -1,6 +1,16 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
|
|
||||||
|
|
||||||
|
export const MY_DATE_FORMAT= {
|
||||||
|
parse: {
|
||||||
|
dateInput: 'DD.MM.YYYY'
|
||||||
|
},
|
||||||
|
display: {
|
||||||
|
dateInput: 'DD.MM.YYYY'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'li-student-register',
|
selector: 'li-student-register',
|
||||||
templateUrl: './student-register.component.html',
|
templateUrl: './student-register.component.html',
|
||||||
|
|
Loading…
Reference in New Issue
Placeholder auf Deutsch