Make generic form component

src/app/deposit/components/form/form.component.html

-<form [formGroup]="createDepositForm" (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
   <mat-form-field appearance="outline">
     <mat-label>{{'deposit.title' | translate }}</mat-label>
     <input [formControlName]="title" matInput placeholder="{{'deposit.title.placeholder' | translate }}">
@@ -90,7 +90,7 @@
           mat-flat-button
           color="primary"
           type="submit"
-          [disabled]="!createDepositForm.valid">
+          [disabled]="!form.valid">
     {{'deposit.submit' | translate }}
   </button>
 </form>

src/app/deposit/components/form/form.component.spec.ts

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

src/app/deposit/components/form/form.component.ts

-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {FormBuilder, Validators} from "@angular/forms";
 import {DepositsModel, LanguagesModel, LicensesModel} from "@app/generated-api";
+import {AbstractFormComponent} from "@app/shared/components/abstract-form/abstract-form.component";
 import AccessModelEnum = DepositsModel.AccessModelEnum;
 
 @Component({
   selector: "dlcm-form-deposit",
   templateUrl: "./form.component.html",
-  styleUrls: ["./form.component.scss"],
+  styleUrls: ["../../../shared/components/abstract-form/abstract-form.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormComponent implements OnInit {
-  createDepositForm: FormGroup;
+export class FormComponent extends AbstractFormComponent<DepositsModel> {
   title = "title";
   description = "description";
   languageId = "languageId";
@@ -26,42 +26,18 @@ export class FormComponent implements OnInit {
 
   accessModelEnum = AccessModelEnum;
 
-  @Input()
-  model: DepositsModel;
-
-  @Input()
-  readonly: boolean;
-
   @Input()
   languages: LanguagesModel[];
 
   @Input()
   licenses: LicensesModel[];
 
-  @Output()
-  submitEvent: EventEmitter<any>;
-
-  constructor(private fb: FormBuilder) {
-    this.submitEvent = new EventEmitter<any>();
+  constructor(protected fb: FormBuilder) {
+    super(fb);
   }
 
-  ngOnInit() {
-    if (this.model) {
-      this.bindFormTo(this.model);
-    } else {
-      this.initNewForm();
-    }
-    this.disableIfReadonly();
-  }
-
-  private disableIfReadonly() {
-    if (this.readonly) {
-      this.createDepositForm.disable();
-    }
-  }
-
-  private initNewForm() {
-    this.createDepositForm = this.fb.group({
+  protected initNewForm() {
+    this.form = this.fb.group({
       title: ["", Validators.required],
       description: ["", Validators.required],
       organizationUnitId: [""],
@@ -78,8 +54,8 @@ export class FormComponent implements OnInit {
     });
   }
 
-  private bindFormTo(deposit: DepositsModel) {
-    this.createDepositForm = this.fb.group({
+  protected bindFormTo(deposit: DepositsModel) {
+    this.form = this.fb.group({
       title: [deposit.title, Validators.required],
       description: [deposit.description, Validators.required],
       organizationUnitId: [deposit.organizationalUnitId],
@@ -95,8 +71,4 @@ export class FormComponent implements OnInit {
       preservationPolicyId: [deposit.preservationPolicyId],
     });
   }
-
-  onSubmit() {
-    this.submitEvent.emit(this.createDepositForm.value as DepositsModel);
-  }
 }

src/app/organizational-unit/components/form/form.component.html

-<form [formGroup]="createOrganizationalUnitForm" (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
   <mat-form-field appearance="outline">
     <mat-label>{{'organizationalUnit.name' | translate }}</mat-label>
     <input [formControlName]="name" matInput placeholder="{{'organizationalUnit.name' | translate }}">
@@ -30,7 +30,7 @@
           mat-flat-button
           color="primary"
           type="submit"
-          [disabled]="!createOrganizationalUnitForm.valid">
+          [disabled]="!form.valid">
     {{'organizationalUnit.submit' | translate }}
   </button>
 </form>

src/app/organizational-unit/components/form/form.component.scss

-form {
-  display: flex;
-  flex-direction: column;
-}

src/app/organizational-unit/components/form/form.component.spec.ts

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

src/app/organizational-unit/components/form/form.component.ts

-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
-import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {ChangeDetectionStrategy, Component} from "@angular/core";
+import {FormBuilder, Validators} from "@angular/forms";
 import {OrganizationalUnitsModel} from "@app/generated-api";
+import {AbstractFormComponent} from "@app/shared/components/abstract-form/abstract-form.component";
 import {DateUtil} from "@app/shared/utils/date.util";
 
 @Component({
   selector: "dlcm-form-orgunit",
   templateUrl: "./form.component.html",
-  styleUrls: ["./form.component.scss"],
+  styleUrls: ["../../../shared/components/abstract-form/abstract-form.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FormComponent implements OnInit {
-  createOrganizationalUnitForm: FormGroup;
+export class FormComponent extends AbstractFormComponent<OrganizationalUnitsModel> {
   name = "name";
   description = "description";
   isEmpty = "isEmpty";
@@ -18,38 +18,12 @@ export class FormComponent implements OnInit {
   openingDate = "openingDate";
   open = "open";
 
-  @Input()
-  model: OrganizationalUnitsModel;
-
-  @Input()
-  readonly: boolean;
-
-  @Output()
-  submitEvent: EventEmitter<any>;
-
-  constructor(private fb: FormBuilder) {
-    this.submitEvent = new EventEmitter<any>();
-  }
-
-  ngOnInit() {
-    if (this.model) {
-      this.bindFormTo(this.model);
-
-    } else {
-      this.initNewForm();
-    }
-
-    this.disableIfReadonly();
-  }
-
-  private disableIfReadonly() {
-    if (this.readonly) {
-      this.createOrganizationalUnitForm.disable();
-    }
+  constructor(protected fb: FormBuilder) {
+    super(fb);
   }
 
-  private initNewForm() {
-    this.createOrganizationalUnitForm = this.fb.group({
+  protected initNewForm() {
+    this.form = this.fb.group({
       name: ["", Validators.required],
       description: ["", Validators.required],
       openingDate: [""],
@@ -59,8 +33,8 @@ export class FormComponent implements OnInit {
     });
   }
 
-  private bindFormTo(organizationalUnit: OrganizationalUnitsModel) {
-    this.createOrganizationalUnitForm = this.fb.group({
+  protected bindFormTo(organizationalUnit: OrganizationalUnitsModel) {
+    this.form = this.fb.group({
       name: [organizationalUnit.name, Validators.required],
       description: [organizationalUnit.description, Validators.required],
       openingDate: [organizationalUnit.openingDate],
@@ -70,9 +44,9 @@ export class FormComponent implements OnInit {
     });
   }
 
-
   onSubmit() {
-    const organizationalUnit = this.createOrganizationalUnitForm.value as OrganizationalUnitsModel;
+    // OVERRIDE base method
+    const organizationalUnit = this.form.value as OrganizationalUnitsModel;
     organizationalUnit.openingDate = DateUtil.convertToISO8601(organizationalUnit.openingDate);
     organizationalUnit.closingDate = DateUtil.convertToISO8601(organizationalUnit.closingDate);
     this.addResId(organizationalUnit);

src/app/shared/components/abstract-form/abstract-form.component.html

+<!--TO OVERRIDE-->

src/app/shared/components/abstract-form/abstract-form.component.ts

+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {DepositsModel} from "@app/generated-api";
+import {BaseDirective} from "@app/shared/directives/base.directive";
+
+@Component({
+  selector: "dlcm-abstract-form",
+  templateUrl: "./abstract-form.component.html",
+  styleUrls: ["./abstract-form.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export abstract class AbstractFormComponent<T> extends BaseDirective implements OnInit {
+  protected form: FormGroup;
+
+  @Input()
+  model: T;
+
+  @Input()
+  readonly: boolean;
+
+  @Output()
+  submitEvent: EventEmitter<T>;
+
+  protected constructor(protected fb: FormBuilder) {
+    super();
+    this.submitEvent = new EventEmitter<T>();
+  }
+
+  ngOnInit() {
+    if (this.model) {
+      this.bindFormTo(this.model);
+    } else {
+      this.initNewForm();
+    }
+    this.disableIfReadonly();
+  }
+
+  private disableIfReadonly() {
+    if (this.readonly) {
+      this.form.disable();
+    }
+  }
+
+  protected abstract initNewForm();
+
+  protected abstract bindFormTo(model: T);
+
+  protected onSubmit() {
+    this.submitEvent.emit(this.form.value as T);
+  }
+}

src/app/shared/shared.module.ts

@@ -2,6 +2,7 @@ import {CommonModule} from "@angular/common";
 import {NgModule} from "@angular/core";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MaterialModule} from "@app/material.module";
+import {AbstractFormComponent} from "@app/shared/components/abstract-form/abstract-form.component";
 import {DataTableComponent} from "@app/shared/components/data-table/data-table.component";
 import {SearchComponent} from "@app/shared/components/search/search.component";
 import {LanguageState} from "@app/shared/language.state";
@@ -27,6 +28,7 @@ const components = [
   SearchComponent,
   DataTableComponent,
   PaginatorComponent,
+  AbstractFormComponent,
   BreadcrumbComponent,
 ];
 const views = [