Merge Anmeldeformular into main #21
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {}
|
||||
|
|
|
@ -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
|
||||
|
@ -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
igorpropisnov
commented
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
igorpropisnov
commented
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>
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue
Placeholder auf Deutsch