V0.1g Weitere Modulasierung der Components / Layouts
This commit is contained in:
parent
ff7c00e08c
commit
cc693d3c95
@ -1,90 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
<app-header></app-header>
|
<app-header></app-header>
|
||||||
<h1>Einkaufszettel1</h1>
|
<app-blog-create></app-blog-create>
|
||||||
<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-footer></app-footer>
|
<app-footer></app-footer>
|
||||||
|
|||||||
@ -16,11 +16,6 @@ describe('AppComponent', () => {
|
|||||||
expect(app).toBeTruthy();
|
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', () => {
|
it('should render title', () => {
|
||||||
const fixture = TestBed.createComponent(AppComponent);
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
|||||||
@ -1,80 +1,15 @@
|
|||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {initialEntries} from './components/blog-entry/initialEntries';
|
|
||||||
import {BlogEntry} from './components/blog-entry/blog-entry';
|
|
||||||
import {FormBuilder, Validators} from '@angular/forms';
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
templateUrl: 'app.component.html'
|
templateUrl: 'app.component.html'
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent implements OnInit {
|
||||||
|
|
||||||
title = 'Einkaufszettel';
|
constructor(){
|
||||||
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 {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
|||||||
import { NavbarComponent } from './navbar/navbar.component';
|
import { NavbarComponent } from './navbar/navbar.component';
|
||||||
import { HeaderComponent } from './components/header/header.component';
|
import { HeaderComponent } from './components/header/header.component';
|
||||||
import { FooterComponent } from './components/footer/footer.component';
|
import { FooterComponent } from './components/footer/footer.component';
|
||||||
|
import { BlogCreateComponent } from './components/blog-create/blog-create.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -14,7 +15,8 @@ import { FooterComponent } from './components/footer/footer.component';
|
|||||||
BlogEntryComponent,
|
BlogEntryComponent,
|
||||||
NavbarComponent,
|
NavbarComponent,
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
FooterComponent
|
FooterComponent,
|
||||||
|
BlogCreateComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|||||||
87
src/app/components/blog-create/blog-create.component.html
Normal file
87
src/app/components/blog-create/blog-create.component.html
Normal 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
25
src/app/components/blog-create/blog-create.component.spec.ts
Normal 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
83
src/app/components/blog-create/blog-create.component.ts
Normal 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 {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user