WIP: Anmeldeformular #16
|
@ -31,6 +31,7 @@
|
|||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
|
@ -99,6 +100,7 @@
|
|||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": []
|
||||
|
|
|
@ -3,12 +3,14 @@ import { RouterModule, Routes } from '@angular/router';
|
|||
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
||||
import { VisitsComponent } from './components/visits/visits.component';
|
||||
import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
|
||||
import {StudentRegisterComponent} from "./components/students/student-register/student-register.component";
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'students', component: StudentListComponent },
|
||||
{ path: 'visits', component: VisitsComponent },
|
||||
{ path: 'select', component: VisitsDatetimeComponent },
|
||||
{ path: 'visits/:date/:time', component: VisitsComponent },
|
||||
{ path: 'select', component: VisitsDatetimeComponent },
|
||||
{ path: 'register', component: StudentRegisterComponent },
|
||||
{ path: 'visits/:date/:time', component: VisitsComponent },
|
||||
{ path: '**', redirectTo: 'students' }
|
||||
];
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { StudentListComponent } from './components/students/student-list/student-list.component';
|
||||
|
@ -20,6 +20,12 @@ 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 {MatStepperModule} from "@angular/material/stepper";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {MatButtonModule} from "@angular/material/button";
|
||||
import {MatRadioModule} from "@angular/material/radio";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -32,7 +38,8 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|||
EnrollPipe,
|
||||
VisitsComponent,
|
||||
StudentEnrollComponent,
|
||||
VisitsDatetimeComponent
|
||||
VisitsDatetimeComponent,
|
||||
StudentRegisterComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
@ -47,6 +54,12 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|||
MatFormFieldModule,
|
||||
MatRippleModule,
|
||||
MatNativeDateModule,
|
||||
MatStepperModule,
|
||||
ReactiveFormsModule,
|
||||
MatInputModule,
|
||||
MatButtonModule,
|
||||
MatRadioModule,
|
||||
MatSelectModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
<!--<button mat-raised-button (click)="isEditable = !isEditable">-->
|
||||
<!-- {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
|
||||
<!--</button>-->
|
||||
|
||||
<mat-stepper linear #stepper>
|
||||
<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="firstCtrl" placeholder="Last name, 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>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Birthdate</mat-label>
|
||||
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
|
||||
</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-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>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Postal Code</mat-label>
|
||||
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Phone</mat-label>
|
||||
<input matInput formControlName="firstCtrl" placeholder="Last name, First name" 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>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
|
||||
<form [formGroup]="secondFormGroup">
|
||||
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Address</mat-label>
|
||||
<input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
|
||||
|
||||
required>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Done</ng-template>
|
||||
<p>You are now done.</p>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button (click)="stepper.reset()">Reset</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-stepper>
|
|
@ -0,0 +1,43 @@
|
|||
.mat-stepper-horizontal {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mat-stepper-horizontal {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input, button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #0366d6;
|
||||
}
|
||||
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
background-color: #1576d5;
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.leftContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45%;
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StudentRegisterComponent } from './student-register.component';
|
||||
|
||||
describe('StudentRegisterComponent', () => {
|
||||
let component: StudentRegisterComponent;
|
||||
let fixture: ComponentFixture<StudentRegisterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ StudentRegisterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StudentRegisterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,25 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
|
||||
|
||||
@Component({
|
||||
igorpropisnov
commented
Bitte in eine Standalone Componente umwandeln + changeDetection auf OnPush setzen. Bitte in eine Standalone Componente umwandeln + changeDetection auf OnPush setzen.
|
||||
selector: 'li-student-register',
|
||||
templateUrl: './student-register.component.html',
|
||||
styleUrls: ['./student-register.component.scss']
|
||||
})
|
||||
|
||||
export class StudentRegisterComponent implements OnInit {
|
||||
firstFormGroup!: FormGroup;
|
||||
secondFormGroup!: FormGroup;
|
||||
isEditable = false;
|
||||
|
||||
constructor(private _formBuilder: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.firstFormGroup = this._formBuilder.group({
|
||||
firstCtrl: ['', Validators.required],
|
||||
});
|
||||
this.secondFormGroup = this._formBuilder.group({
|
||||
secondCtrl: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
}
|
|
@ -65,4 +65,6 @@ body {
|
|||
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
Wir brauchen hier DE Format. DD.MM.YYYY