[player] Set initial form and validator value for compound elements

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

@@ -21,7 +21,7 @@ export abstract class FormElementComponent extends ElementComponent implements O
   ngOnInit(): void {
     this.elementFormControl = this.formControl;
     this.elementFormControl?.setValue((this.elementModel as InputElement).value, { emitEvent: false });
-    this.setValidators.emit(this.validators);
+    this.setFormControlValidator();
     this.elementFormControl.valueChanges
       .pipe(
         startWith((this.elementModel as InputElement).value),
@@ -52,6 +52,10 @@ export abstract class FormElementComponent extends ElementComponent implements O
     this.elementFormControl.setValue(value);
   }
 
+  setFormControlValidator(): void {
+    this.setValidators.emit(this.validators);
+  }
+
   ngOnDestroy(): void {
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();

projects/player/src/app/components/element-container/element-container.component.ts

@@ -119,7 +119,7 @@ export class ElementContainerComponent implements OnInit {
     const elementForm = this.formBuilder.group({});
     elementComponent.parentForm = elementForm;
     const compoundChildren = elementComponent.getFormElementModelChildren();
-    this.subscribeCompoundChildren(elementComponent, compoundChildren);
+    this.subscribeCompoundChildren(elementComponent, compoundChildren, elementForm);
     this.registerFormGroup(elementForm);
     compoundChildren.forEach((element: InputElement) => {
       this.formService.registerFormControl({
@@ -144,7 +144,7 @@ export class ElementContainerComponent implements OnInit {
   }
 
   private subscribeCompoundChildren(
-    elementComponent: CompoundElementComponent, compoundChildren: InputElement[]
+    elementComponent: CompoundElementComponent, compoundChildren: InputElement[], elementForm: FormGroup
   ): void {
     if (elementComponent.childrenAdded) {
       elementComponent.childrenAdded
@@ -168,7 +168,9 @@ export class ElementContainerComponent implements OnInit {
             );
             const formChild = (child as FormElementComponent);
             if (formChild) {
+              this.subscribeSetValidators(formChild, elementForm);
               formChild.setFormValue(child.elementModel.value);
+              formChild.setFormControlValidator();
             }
           });
           this.changeDetectorRef.detectChanges();
@@ -263,7 +265,7 @@ export class ElementContainerComponent implements OnInit {
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe((validators: ValidatorFn[]) => {
           this.formService.setValidators({
-            id: this.elementModel.id,
+            id: elementComponent.elementModel.id,
             validators: validators,
             formGroup: elementForm
           });