database-form.component.ts

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { Database } from 'src/app/metamodel/store/models';

@Component({
    selector: 'app-database-form',
    templateUrl: 'database-form.component.html'
})
export class DatabaseFormComponent implements OnInit {
    @Input() database: Database;
    @Output() onSubmit: EventEmitter<Database> = new EventEmitter();

    public form = new FormGroup({
        label: new FormControl('', [Validators.required]),
        dbname: new FormControl('', [Validators.required]),
        dbtype: new FormControl('', [Validators.required]),
        dbhost: new FormControl('', [Validators.required]),
        dbport: new FormControl('', [Validators.required]),
        dblogin: new FormControl('', [Validators.required]),
        dbpassword: new FormControl('', [Validators.required])
    });

    ngOnInit() {
        if (this.database) {
            this.form.patchValue(this.database);
        }
    }

    submit() {
        if (this.database) {
            this.onSubmit.emit({
                ...this.database,
                ...this.form.value
            });
        } else {
            this.onSubmit.emit(this.form.value);
        }
    }
}