Compute summary for component fields

frontend/src/app/features/content/shared/forms/array-item.component.html

@@ -1,4 +1,4 @@
-<div class="card item" [class.invalid]="isInvalid | async">
+<div class="card item" [class.invalid]="isInvalidForm | async">
     <div class="card-header drag-handle">
         <div class="row">
             <div class="col-auto pe-1">

frontend/src/app/features/content/shared/forms/array-item.component.ts

@@ -72,7 +72,7 @@ export class ArrayItemComponent implements OnChanges {
     @ViewChildren(ComponentSectionComponent)
     public sections!: QueryList<ComponentSectionComponent>;
 
-    public isInvalid?: Observable<boolean>;
+    public isInvalidForm?: Observable<boolean>;
     public isInvalidComponent?: Observable<boolean>;
 
     public title?: Observable<string>;
@@ -83,7 +83,7 @@ export class ArrayItemComponent implements OnChanges {
 
     public ngOnChanges(changes: SimpleChanges) {
         if (changes['formModel']) {
-            this.isInvalid = invalid$(this.formModel.form);
+            this.isInvalidForm = invalid$(this.formModel.form);
 
             if (Types.is(this.formModel, ComponentForm)) {
                 this.isInvalidComponent = this.formModel.schemaChanges.pipe(map(x => !x));
@@ -146,15 +146,8 @@ function getTitle(formModel: ObjectFormBase) {
 
     let valueLength = 0;
 
-    if (Types.is(formModel, ComponentForm) && formModel.schema) {
+    function addFields(fields: ReadonlyArray<FieldDto>) {
-        const formatted = formModel.schema.displayName;
+        for (const field of fields) {
-
-        values.push(formatted);
-        valueLength += formatted.length;
-    }
-
-    if (Types.is(formModel.field, RootFieldDto)) {
-        for (const field of formModel.field.nested) {
             const fieldValue = value[field.name];
 
             if (fieldValue) {
@@ -172,5 +165,16 @@ function getTitle(formModel: ObjectFormBase) {
         }
     }
 
+    if (Types.is(formModel, ComponentForm) && formModel.schema) {
+        const formatted = formModel.schema.displayName;
+
+        values.push(formatted);
+        valueLength += formatted.length;
+
+        addFields(formModel.schema.fields);
+    } else if (Types.is(formModel.field, RootFieldDto)) {
+       addFields(formModel.field.nested);
+    }
+
     return values.join(', ');
 }