Merge pull request #480 from Saeleas/master

Fixing issue when using visibleIf in array items.

Author: ebrehault

projects/schema-form/src/lib/model/arrayproperty.ts

@@ -23,6 +23,7 @@ export class ArrayProperty extends PropertyGroup {
   addItem(value: any = null): FormProperty {
     let newProperty = this.addProperty();
     newProperty.reset(value, false);
+    newProperty._bindVisibility();
     return newProperty;
   }
 

src/app/json-schema-example/json-schema-example.component.canonical-path.spec.ts

@@ -92,7 +92,7 @@ describe('JsonSchemaExampleComponent - canonical-path', () => {
 
     // select demo sample
     const select: HTMLSelectElement = fixture.debugElement.query(By.css('#samples')).nativeElement;
-    select.value = select.options[6].value;  // <-- select a new value
+    select.value = select.options[7].value;  // <-- select a new value
     select.dispatchEvent(new Event('change'));
     fixture.detectChanges();
   });

src/app/json-schema-example/json-schema-example.component.ts

@@ -15,6 +15,7 @@ import binding_sample_bindings from './binding_sample_bindings';
 import visibility_binding_example from './visibility-binding-example-schema.json';
 import visibility_binding_example2 from './visibility-binding-example-schema2.json';
 import visibility_binding_example3 from './visibility-binding-example-schema3.json';
+import visibility_binding_example4 from './visibility-binding-example-schema4.json';
 import sample_canonical_path from './sample-canonical-path.json';
 
 import {AppService, AppData} from '../app.service';
@@ -43,7 +44,8 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy {
     {label: 'Sample 4 - Visibility binding', event: this.changeSchemaVisibilityBinding, selected: false},
     {label: 'Sample 5 - Visibility binding 2', event: this.changeSchemaVisibilityBinding2, selected: false},
     {label: 'Sample 6 - Visibility binding 3', event: this.changeSchemaVisibilityBinding3, selected: false},
-    {label: 'Sample 7 - Canonical path', event: this.changeSchemaCanonicalPath, selected: false},
+    {label: 'Sample 7 - Visibility binding 4', event: this.changeSchemaVisibilityBinding4, selected: false},
+    {label: 'Sample 8 - Canonical path', event: this.changeSchemaCanonicalPath, selected: false},
   ];
 
   constructor(
@@ -229,6 +231,14 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy {
     this.actions = {};
   }
 
+  changeSchemaVisibilityBinding4() {
+    this.schema = visibility_binding_example4 as unknown as ISchema;
+    this.model = {};
+    this.fieldBindings = {};
+    this.fieldValidators = {};
+    this.actions = {};
+  }
+
   changeSchemaCanonicalPath(){
     this.schema = sample_canonical_path as unknown as ISchema;
     this.model = {};

src/app/json-schema-example/json-schema-example.component.visibleIf.spec.ts

@@ -817,3 +817,67 @@ describe("JsonSchemaExampleComponent - visibleIf - condition-types (chained cond
     });
   }));
 });
+
+
+describe("JsonSchemaExampleComponent - visibleIf - array items have visibleIf fields", () => {
+  let component: JsonSchemaExampleComponent;
+  let fixture: ComponentFixture<JsonSchemaExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [SchemaFormModule.forRoot(), HttpClientModule, FormsModule, ReactiveFormsModule],
+      declarations: [JsonSchemaExampleComponent],
+      providers: [
+        { provide: WidgetRegistry, useClass: DefaultWidgetRegistry },
+        {
+          provide: SchemaValidatorFactory,
+          useClass: ZSchemaValidatorFactory
+        }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JsonSchemaExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  beforeEach(() => {
+    // select demo sample
+    const select: HTMLSelectElement = fixture.debugElement.query(By.css("#samples")).nativeElement;
+    select.value = select.options[6].value; // <-- select a new value
+    select.dispatchEvent(new Event("change"));
+    fixture.detectChanges();
+  });
+
+  it(`# 1. Test 'VisibleIf' within an element of an array`, async(() => {
+    // Visible component shows up if status value is 'Warn' or 'Fail'
+
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+
+      // expect page containing a sf-form element
+      const sf_form = fixture.debugElement.query(By.css("sf-form"));
+      expect(sf_form).toBeTruthy();
+
+      // Add an element
+      const _add_button = fixture.debugElement.query(By.css(".array-add-button")).nativeElement;
+      _add_button.click();
+      fixture.detectChanges();
+      // initial state
+      const _select: HTMLSelectElement = fixture.debugElement.query(By.css("#arrayObject\\.0\\.showHiddenField")).nativeElement;
+      let _input = fixture.debugElement.query(By.css("#arrayObject\\.0\\.visibleTest"));
+      expect(_select).toBeDefined();
+      expect(_input).toBeNull();
+
+      // change state to make field visible
+      _select.value = _select.options[1].value;
+      _select.dispatchEvent(new Event("change"));
+      fixture.detectChanges();
+      _input = fixture.debugElement.query(By.css("#arrayObject\\.0\\.visibleTest")).nativeElement;
+      expect(_input).toBeDefined();
+    });
+  }));
+
+});

src/app/json-schema-example/visibility-binding-example-schema4.json

@@ -0,0 +1,41 @@
+{
+  "type": "object",
+  "title": "Example of visibleIf inside of an array item",
+  "description": "This example shows how to use visibility options inside of items of an array",
+  "properties": {
+    "arrayObject": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "title": "Object with visibleIf properties.",
+        "properties": {
+          "showHiddenField": {
+            "type": "integer",
+            "widget": "select",
+            "title": "Choose 1 to show the hidden field or 0 to hide it. By default the field is hidden.",
+            "oneOf": [
+              {
+                "enum": [0],
+                "description": "Hide field."
+              },
+              {
+                "enum": [1],
+                "description": "Show hidden field."
+              }
+            ]
+          },
+          "visibleTest": {
+            "type": "string",
+            "title": "This is shown if previous field is 1.",
+            "visibleIf": {
+              "showHiddenField": [1]
+            }
+          }
+        }
+      }
+    }
+  },
+  "required": [
+    "arrayObject"
+  ]
+}