Merge Anmeldeformular into main #21
|
@ -3,11 +3,11 @@
|
||||||
<!--</button>-->
|
<!--</button>-->
|
||||||
|
|
||||||
<mat-stepper linear #stepper>
|
<mat-stepper linear #stepper>
|
||||||
|
|
||||||
<!-- Step 1-->
|
<!-- Step 1-->
|
||||||
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
<mat-step [stepControl]="firstFormGroup" class="firstStep">
|
||||||
<form [formGroup]="firstFormGroup">
|
<form [formGroup]="firstFormGroup" class="formContainer">
|
||||||
<ng-template matStepLabel>Personal Information</ng-template>
|
<ng-template matStepLabel>Personal Information</ng-template>
|
||||||
<div class="formContainer">
|
|
||||||
<div class="leftContainer">
|
<div class="leftContainer">
|
||||||
|
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
|
@ -63,37 +63,115 @@
|
||||||
<mat-error>Invalid E-Mail Address</mat-error>
|
<mat-error>Invalid E-Mail Address</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button (click)="onClick()">test</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperNext [disabled]="secondFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
|
||||||
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
<!-- Step 2-->
|
<!-- Step 2-->
|
||||||
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
||||||
<form [formGroup]="secondFormGroup">
|
<form [formGroup]="secondFormGroup" class="formContainer2">
|
||||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
<ng-template matStepLabel>Banking Information</ng-template>
|
||||||
<mat-form-field appearance="fill">
|
<mat-form-field appearance="fill">
|
||||||
<mat-label>Address</mat-label>
|
<mat-label>Account Holder</mat-label>
|
||||||
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
|
<input matInput formControlName="accountHolder"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>IBAN</mat-label>
|
||||||
|
<input matInput formControlName="iban" required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>BIC</mat-label>
|
||||||
|
<input matInput formControlName="bic"
|
||||||
|
required>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field appearance="fill">
|
||||||
|
<mat-label>Name of Financial Institute</mat-label>
|
||||||
|
<input matInput formControlName="nameOfFinancialInstitute"
|
||||||
required>
|
required>
|
||||||
</mat-form-field>
|
</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>
|
</form>
|
||||||
|
|
||||||
|
<div class="buttonsContainer">
|
||||||
|
<button mat-button matStepperPrevious class="backButton">Back</button>
|
||||||
|
<button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
|
||||||
|
</div>
|
||||||
</mat-step>
|
</mat-step>
|
||||||
|
|
||||||
|
<!-- <!– Step 1–>-->
|
||||||
|
<!-- <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
|
||||||
|
<!-- <form [formGroup]="firstFormGroup">-->
|
||||||
|
<!-- <ng-template matStepLabel>Personal Information</ng-template>-->
|
||||||
|
<!-- <div class="formContainer">-->
|
||||||
|
<!-- <div class="leftContainer">-->
|
||||||
|
|
||||||
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
<!-- <mat-label>Name</mat-label>-->
|
||||||
|
<!-- <input matInput formControlName="firstName" placeholder="First name" required>-->
|
||||||
|
<!-- </mat-form-field>-->
|
||||||
|
|
||||||
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
<!-- <mat-label>Surname</mat-label>-->
|
||||||
|
<!-- <input matInput formControlName="lastName" placeholder="Last name" required>-->
|
||||||
|
<!-- </mat-form-field>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
<!-- <mat-label>Birthdate</mat-label>-->
|
||||||
|
<!-- <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 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="address" required>-->
|
||||||
|
<!-- </mat-form-field>-->
|
||||||
|
|
||||||
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
<!-- <mat-label>Postal Code</mat-label>-->
|
||||||
|
<!-- <input matInput formControlName="postalCode" required>-->
|
||||||
|
<!-- </mat-form-field>-->
|
||||||
|
|
||||||
|
<!-- <mat-form-field appearance="fill">-->
|
||||||
|
<!-- <mat-label>Phone</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-form-field>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'">Next</button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </form>-->
|
||||||
|
<!-- </mat-step>-->
|
||||||
|
|
||||||
|
|
||||||
<!-- Step 3-->
|
<!-- Step 3-->
|
||||||
<mat-step>
|
<mat-step>
|
||||||
<ng-template matStepLabel>Done</ng-template>
|
<ng-template matStepLabel>Done</ng-template>
|
||||||
|
|
|
@ -29,8 +29,15 @@ button {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.formContainer2 {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.leftContainer {
|
.leftContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -41,4 +48,6 @@ button {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
.backButton {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
|
@ -16,16 +16,19 @@ export class StudentRegisterComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.firstFormGroup = this._formBuilder.group({
|
this.firstFormGroup = this._formBuilder.group({
|
||||||
firstName: ['', Validators.required], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
|
firstName: ['', Validators.required],
|
||||||
lastName: ['', Validators.required],
|
lastName: ['', Validators.required],
|
||||||
birthdate: ['', Validators.required],
|
birthdate: ['', Validators.required],
|
||||||
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string.
|
||||||
address: ['', Validators.required],
|
address: ['', Validators.required],
|
||||||
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||||
email: ['', [Validators.required, Validators.email]],
|
email: ['', [Validators.required, Validators.email]],
|
||||||
});
|
});
|
||||||
this.secondFormGroup = this._formBuilder.group({
|
this.secondFormGroup = this._formBuilder.group({
|
||||||
secondCtrl: ['', Validators.required],
|
accountHolder: ['', Validators.required],
|
||||||
|
iban: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
|
||||||
|
bic: ['', Validators.required],
|
||||||
|
nameOfFinancialInstitute: ['', Validators.required],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue