Refactor form handling in compound components

Also all elements now take the parentForm as input. Allowing it to use 
them with template binding and not only setting the value directly (in 
the controller).

projects/common/element-components/compound-elements/compound-element.directive.ts

@@ -4,12 +4,13 @@ import {
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ElementComponent } from '../../element-component.directive';
-import { InputElement } from '../../models/uI-element';
+import { InputElement, ValueChangeElement } from '../../models/uI-element';
 
 @Directive({ selector: 'app-compound-element' })
 
 export abstract class CompoundElementComponent extends ElementComponent implements AfterViewInit {
   @Output() childrenAdded = new EventEmitter<QueryList<ElementComponent>>();
+  @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   compoundChildren!: QueryList<ElementComponent>;
   parentForm!: FormGroup;
   allowClickThrough = true;

projects/common/element-components/compound-elements/likert-radio-button-group.component.ts

@@ -31,6 +31,5 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
 })
 export class LikertRadioButtonGroupComponent extends FormElementComponent {
   @Input() elementModel!: LikertElementRow;
-  @Input() parentForm!: FormGroup;
   @Input() firstColumnSizeRatio!: number;
 }

projects/common/element-components/compound-elements/likert.component.ts

@@ -59,10 +59,8 @@ import { CompoundElementComponent } from './compound-element.directive';
   ]
 })
 export class LikertComponent extends CompoundElementComponent {
-  @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @ViewChildren(LikertRadioButtonGroupComponent) compoundChildren!: QueryList<LikertRadioButtonGroupComponent>;
   elementModel!: LikertElement;
-  parentForm!: FormGroup;
 
   getFormElementModelChildren(): LikertElementRow[] {
     return this.elementModel.rows;

projects/common/form-element-component.directive.ts

 import {
-  Directive, EventEmitter, OnDestroy, OnInit, Output
+  Directive, EventEmitter, Input, OnDestroy, OnInit, Output
 } from '@angular/core';
 import {
   FormControl, FormGroup, ValidatorFn, Validators
@@ -11,9 +11,9 @@ import { InputElement, InputElementValue, ValueChangeElement } from './models/uI
 
 @Directive()
 export abstract class FormElementComponent extends ElementComponent implements OnInit, OnDestroy {
+  @Input() parentForm!: FormGroup;
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() setValidators = new EventEmitter<ValidatorFn[]>();
-  parentForm!: FormGroup;
   elementFormControl!: FormControl;
 
   private ngUnsubscribe = new Subject<void>();