greifch67520/MDT5_Angular
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

V0.1g Weitere Modulasierung der Components / Layouts

Browse Source
This commit is contained in:
Christian Greif 2020-06-11 23:00:52 +02:00
parent ff7c00e08c
commit cc693d3c95
8 changed files with 206 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/app/app.component.html
View File

@ -1,90 +1,5 @@
<app-header></app-header>
<h1>Einkaufszettel1</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>
<form (ngSubmit)="saveTask(form.value)" #form="ngForm">
<div class="form-group">
<div><label for="title">Titel* </label></div>
<div>
<input type="text" class="form-control" name="title" id="title" #title ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="image">Bild-URL* </label></div>
<div>
<input type="text" class="form-control" name="title" id="image" #image ngModel required/>
</div>
</div>
<div class="form-group">
<div><label>Kategorie* </label></div>
<div>
<input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="menge">Menge* </label></div>
<div>
<input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="kommentar">Kommentar: </label></div>
<textarea id="kommentar" #kommentar cols="20" rows="3" #text>
</textarea>
</div>
<div class="form-group">
<button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
Eintrag anlegen
</button>
</div>
<div>
<button (click)="deleteAllEntries()">
Alle Einträge löschen
</button>
</div>
<div>
<button (click)="deleteLastEntry()">
Letzten Eintrag Löschen
</button>
</div>
</form>
</div>
<div class="container">
<div class="row custom-wrapper">
<div class="col-md-12">
<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="group-gap">
<div class="d-block my-3">
<div class="mb-3">
<select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
<option value="">Wählen sie eine Kategorie</option>
<option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
</select>
<!-- error block -->
<div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
<sup>*</sup>Bitte geben sie eine Kategorie ein!
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
</form><!-- Form ends -->
</div>
</div>
</div>
<app-blog-create></app-blog-create>
<app-footer></app-footer>

5
src/app/app.component.spec.ts
View File

@ -16,11 +16,6 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
it(`should have as title 'Einkaufszettel'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('Einkaufszettel');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);

75
src/app/app.component.ts
View File

@ -1,80 +1,15 @@
import {Component} from '@angular/core';
import {initialEntries} from './components/blog-entry/initialEntries';
import {BlogEntry} from './components/blog-entry/blog-entry';
import {FormBuilder, Validators} from '@angular/forms';
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
export class AppComponent implements OnInit {
title = 'Einkaufszettel';
entries: BlogEntry[] = [];
isSubmitted = false;
Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
constructor(public fb: FormBuilder) {
this.entries = [];
this.entries = initialEntries;
}
// Getter method to access formcontrols
get kategorieName() {
return this.registrationForm.get('kategorieName');
}
/*########### Form ###########*/
registrationForm = this.fb.group({
kategorieName: ['', [Validators.required]]
});
saveTask(value: any){
console.log(value);
}
createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
if (title && image && kommentar && kategorie) {
const entry = new BlogEntry();
entry.title = title;
entry.image = image;
entry.kategorie = kategorie;
entry.menge = menge;
entry.kommentar = kommentar;
this.entries.push(entry);
}
}
deleteAllEntries() {
console.log(this.entries.length);
const index: number = this.entries.length;
if (index !== -1) {
this.entries = this.entries.splice(index, 1);
}
}
deleteLastEntry() {
console.log(this.entries.length);
const index: number = this.entries.length;
if (index !== -1) {
this.entries.splice(index-1, 1);
}
}
// Kategorie mit Drop Down Menu wählen
changeKategorie(e) {
console.log(e.value);
this.kategorieName.setValue(e.target.value, {
onlySelf: true
});
}
/*########### Template Driven Form ###########*/
onSubmit() {
this.isSubmitted = true;
if (!this.registrationForm.valid) {
return false;
} else {
alert(JSON.stringify(this.registrationForm.value));
}
constructor(){
}
ngOnInit(): void {
}
}

4
src/app/app.module.ts
View File

@ -7,6 +7,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { NavbarComponent } from './navbar/navbar.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { BlogCreateComponent } from './components/blog-create/blog-create.component';
@NgModule({
declarations: [
@ -14,7 +15,8 @@ import { FooterComponent } from './components/footer/footer.component';
BlogEntryComponent,
NavbarComponent,
HeaderComponent,
FooterComponent
FooterComponent,
BlogCreateComponent
],
imports: [
BrowserModule,

0
src/app/components/blog-create/blog-create.component.css Normal file
View File

87
src/app/components/blog-create/blog-create.component.html Normal file
View File

@ -0,0 +1,87 @@
<h1>Einkaufszettel1</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>
<form (ngSubmit)="saveTask(form.value)" #form="ngForm">
<div class="form-group">
<div><label for="title">Titel* </label></div>
<div>
<input type="text" class="form-control" name="title" id="title" #title ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="image">Bild-URL* </label></div>
<div>
<input type="text" class="form-control" name="title" id="image" #image ngModel required/>
</div>
</div>
<div class="form-group">
<div><label>Kategorie* </label></div>
<div>
<input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="menge">Menge* </label></div>
<div>
<input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="kommentar">Kommentar: </label></div>
<textarea id="kommentar" #kommentar cols="20" rows="3" #text>
</textarea>
</div>
<div class="form-group">
<button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
Eintrag anlegen
</button>
</div>
<div>
<button (click)="deleteAllEntries()">
Alle Einträge löschen
</button>
</div>
<div>
<button (click)="deleteLastEntry()">
Letzten Eintrag Löschen
</button>
</div>
</form>
</div>
<div class="container">
<div class="row custom-wrapper">
<div class="col-md-12">
<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="group-gap">
<div class="d-block my-3">
<div class="mb-3">
<select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
<option value="">Wählen sie eine Kategorie</option>
<option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
</select>
<!-- error block -->
<div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
<sup>*</sup>Bitte geben sie eine Kategorie ein!
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
</form><!-- Form ends -->
</div>
</div>
</div>

25
src/app/components/blog-create/blog-create.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BlogCreateComponent } from './blog-create.component';
describe('BlogCreateComponent', () => {
let component: BlogCreateComponent;
let fixture: ComponentFixture<BlogCreateComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BlogCreateComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BlogCreateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

83
src/app/components/blog-create/blog-create.component.ts Normal file
View File

@ -0,0 +1,83 @@
import { Component, OnInit } from '@angular/core';
import {BlogEntry} from "../blog-entry/blog-entry";
import {FormBuilder, Validators} from "@angular/forms";
import {initialEntries} from "../blog-entry/initialEntries";
@Component({
selector: 'app-blog-create',
templateUrl: './blog-create.component.html',
styleUrls: ['./blog-create.component.css']
})
export class BlogCreateComponent implements OnInit {
title = 'Einkaufszettel';
entries: BlogEntry[] = [];
isSubmitted = false;
Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
constructor(public fb: FormBuilder) {
this.entries = [];
this.entries = initialEntries;
}
// Getter method to access formcontrols
get kategorieName() {
return this.registrationForm.get('kategorieName');
}
/*########### Form ###########*/
registrationForm = this.fb.group({
kategorieName: ['', [Validators.required]]
});
saveTask(value: any){
console.log(value);
}
createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
if (title && image && kommentar && kategorie) {
const entry = new BlogEntry();
entry.title = title;
entry.image = image;
entry.kategorie = kategorie;
entry.menge = menge;
entry.kommentar = kommentar;
this.entries.push(entry);
}
}
deleteAllEntries() {
console.log(this.entries.length);
const index: number = this.entries.length;
if (index !== -1) {
this.entries = this.entries.splice(index, 1);
}
}
deleteLastEntry() {
console.log(this.entries.length);
const index: number = this.entries.length;
if (index !== -1) {
this.entries.splice(index-1, 1);
}
}
// Kategorie mit Drop Down Menu wählen
changeKategorie(e) {
console.log(e.value);
this.kategorieName.setValue(e.target.value, {
onlySelf: true
});
}
/*########### Template Driven Form ###########*/
onSubmit() {
this.isSubmitted = true;
if (!this.registrationForm.valid) {
return false;
} else {
alert(JSON.stringify(this.registrationForm.value));
}
}
ngOnInit(): void {
}
}