MDT5_Angular/src/app/app.component.ts

import {Component} from '@angular/core';
import {initialEntries} from './initialEntries';
import {BlogEntry} from './blog-entry';
import {FormBuilder, Validators} from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(public fb: FormBuilder) {
    this.entries = [];
    this.entries = initialEntries;
  }

  // Getter method to access formcontrols
  get kategorieName() {
    return this.registrationForm.get('kategorieName');
  }
  title = 'Einkaufszettel';
  entries: BlogEntry[] = [];
  isSubmitted = false;
  // Kategorien
  Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
/*########### Form ###########*/
  registrationForm = this.fb.group({
    kategorieName: ['', [Validators.required]]
  });

  createBlogEntry(title: string, image: string, kategorie: string, text: string, ) {
    if (title && image && text && kategorie) {
      const entry = new BlogEntry();
      entry.title = title;
      entry.image = image;
      entry.text = text;
      entry.kategorie = kategorie;
      this.entries.push(entry);
    }
  }

  // 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));
    }

  }

}