uebung-7

demo/src/app/Student.ts

@@ -0,0 +1,13 @@
+export class Student {
+  constructor(
+    private _name?: string,
+    private _matrikelnummer?: number,
+  ) {
+  }
+
+  get name(): string|undefined { return this._name; }
+  set name(name: string) { this._name = name; }
+
+  get matrikelnummer(): number|undefined { return this._matrikelnummer; }
+  set matrikelnummer(matrikelnummer: number) { this._matrikelnummer = matrikelnummer; }
+}

demo/src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { StudentForm } from './student-form/student-form';
+import { StudentFormReactive } from './student-form-reactive/student-form-reactive';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'student', component: StudentForm },
+  { path: 'student-reactive', component: StudentFormReactive }
+];

demo/src/app/app.ts

@@ -3,10 +3,11 @@ import { RouterOutlet } from '@angular/router';
 import { CreateAutoComponent } from './create-auto/create-auto';
 import { DisplayHtmlComponent } from './display-html/display-html';
 import { Auto } from './Auto';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, CreateAutoComponent, DisplayHtmlComponent],
+  imports: [RouterOutlet, CreateAutoComponent, DisplayHtmlComponent, FormsModule],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

demo/src/app/student-form-reactive/student-form-reactive.css

@@ -0,0 +1,9 @@
+form {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}
+
+input.ng-invalid {
+  background-color: tomato;
+}

demo/src/app/student-form-reactive/student-form-reactive.html

@@ -0,0 +1,8 @@
+<p>Student: </p>
+<form [formGroup]="form">
+  <label for="name">Name: </label>
+  <input type="text" id="name" formControlName="name"/>
+  <label for="matrikelnummer">Matrikelnummer: </label>
+  <input type="number" id="matrikelnummer" formControlName="matrikelnummer"/>
+  <button type="submit" (click)="print()">Ausgeben</button>
+</form>

demo/src/app/student-form-reactive/student-form-reactive.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentFormReactive } from './student-form-reactive';
+
+describe('StudentFormReactive', () => {
+  let component: StudentFormReactive;
+  let fixture: ComponentFixture<StudentFormReactive>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StudentFormReactive]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StudentFormReactive);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/student-form-reactive/student-form-reactive.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Student } from '../Student';
+
+@Component({
+  selector: 'app-student-form-reactive',
+  imports: [ReactiveFormsModule],
+  templateUrl: './student-form-reactive.html',
+  styleUrl: './student-form-reactive.css',
+})
+export class StudentFormReactive {
+  form: FormGroup = null!;
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      name: new FormControl<string|null>(null),
+      matrikelnummer: new FormControl<number|null>(null, [Validators.required, Validators.pattern('\\d+')])
+    });
+  }
+
+  print() {
+    const value = this.form.value;
+    const model = new Student(value.name, value.matrikelnummer);
+    console.log(model);
+  }
+}

demo/src/app/student-form/student-form.css

@@ -0,0 +1,5 @@
+form {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+}

demo/src/app/student-form/student-form.html

@@ -0,0 +1,8 @@
+<p>Student: </p>
+<form #formularName="ngForm">
+  <label for="name">Name: </label>
+  <input type="text" name="name" [(ngModel)]="model.name"/>
+  <label for="matrikelnummer">Matrikelnummer: </label>
+  <input type="number" name="matrikelnummer" [(ngModel)]="model.matrikelnummer"/>
+  <button type="submit" (click)="print()">Ausgeben</button>
+</form>

demo/src/app/student-form/student-form.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentForm } from './student-form';
+
+describe('StudentForm', () => {
+  let component: StudentForm;
+  let fixture: ComponentFixture<StudentForm>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StudentForm]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StudentForm);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/student-form/student-form.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Student } from '../Student';
+
+@Component({
+  selector: 'app-student-form',
+  imports: [ FormsModule],
+  templateUrl: './student-form.html',
+  styleUrl: './student-form.css',
+})
+export class StudentForm {
+  model: Student = new Student();
+
+  print() {
+    console.log(this.model)
+  }
+}