Merge Anmeldeformular into main #21
|
@ -26,6 +26,7 @@ import {MatInputModule} from "@angular/material/input";
|
|||
import {MatButtonModule} from "@angular/material/button";
|
||||
import {MatRadioModule} from "@angular/material/radio";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -59,7 +60,7 @@ import {MatSelectModule} from "@angular/material/select";
|
|||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule
|
||||
MatSelectModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<!--</button>-->
|
||||
|
||||
<mat-stepper linear #stepper>
|
||||
<!-- Step 1-->
|
||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||
<form [formGroup]="firstFormGroup">
|
||||
<ng-template matStepLabel>Personal Information</ng-template>
|
||||
|
@ -11,54 +12,70 @@
|
|||
|
||||
<mat-form-field appearance="fill">
|
||||
<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 appearance="fill">
|
||||
<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 appearance="fill">
|
||||
<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-label>Gender</mat-label>
|
||||
<mat-select>
|
||||
<mat-option>Male</mat-option>
|
||||
<mat-option value="valid">Female</mat-option>
|
||||
<mat-option value="invalid">Divers</mat-option>
|
||||
<mat-option value="male">Male</mat-option>
|
||||
<mat-option value="female">Female</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>
|
||||
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
|
||||
<input matInput formControlName="address" required>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<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 appearance="fill">
|
||||
<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 appearance="fill">
|
||||
<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>
|
||||
</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>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 2-->
|
||||
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
||||
<form [formGroup]="secondFormGroup">
|
||||
<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"
|
||||
required>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button (click)="onClick()">test2</button>
|
||||
</div>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<!-- Step 3-->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Done</ng-template>
|
||||
<p>You are now done.</p>
|
||||
|
|
|
@ -41,3 +41,4 @@ button {
|
|||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
|
|
|
@ -16,10 +16,20 @@ export class StudentRegisterComponent implements OnInit {
|
|||
|
||||
ngOnInit() {
|
||||
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({
|
||||
secondCtrl: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
onClick() {
|
||||
console.log(this.firstFormGroup)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,45 +26,63 @@ body {
|
|||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.mat-calendar-body-cell-content {
|
||||
background-color: #1861ac;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
.mat-form-field-subscript-wrapper {
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.mat-calendar-table {
|
||||
border: 1px solid white;
|
||||
}
|
||||
// customize datepicker
|
||||
//.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-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;
|
||||
}
|
||||
//
|
||||
//.mat-calendar-body-cell-content {
|
||||
// background-color: #1861ac;
|
||||
// color: #fff;
|
||||
// font-weight: bold;
|
||||
// font-size: 2em;
|
||||
//}
|
||||
//
|
||||
//.mat-calendar-table {
|
||||
// border: 1px solid white;
|
||||
//}
|
||||
//
|
||||
//.mat-calendar-table-header {
|
||||
//
|
||||
// tr {
|
||||
// th {
|
||||
// padding-top: 2em;
|
||||
// }
|
||||
//
|
||||
// th.mat-calendar-table-header-divider {
|
||||
// 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%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
|
Loading…
Reference in New Issue