Merge Anmeldeformular into main #21
|
@ -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]
|
||||||
|
|
|
@ -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 @@
|
||||||
|
|
||||||
alioezdemir marked this conversation as resolved
Outdated
|
|||||||
<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>
|
||||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Placeholder auf Deutsch Placeholder auf Deutsch
|
|||||||
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
|
|
||||||
alioezdemir marked this conversation as resolved
Outdated
igorpropisnov
commented
Hint muss hier DD.MM.YYYY sein Hint muss hier DD.MM.YYYY sein
|
|||||||
<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>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
|
@ -41,3 +41,4 @@ button {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,45 +26,63 @@ body {
|
||||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
alioezdemir marked this conversation as resolved
Outdated
it-as
commented
Bitte keinen auskommentierten Code committen Bitte keinen auskommentierten Code committen
|
|||||||
.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; }
|
||||||
|
|
Loading…
Reference in New Issue
Placeholder auf Deutsch