Merge pull request #364 from guillotinaweb/fix_360_331_329

Fix 360 331 329

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.5.7 (2020-08-17)
+
+- fix #360: VisibleIf-oneOf with 2+ conditions has same property name is not working (daniele-pecora)
+- fix #331: visibleIf stopped working in 2.5.2 (daniele-pecora)
+- fix #329: visibleIf "allOf" Edge case BUG (daniele-pecora)
+
 # 2.5.6 (2020-07-16)
 - Fix #358 Completing Public API
 

README.md

@@ -522,9 +522,16 @@ export class AppComponent {
 ```
 
 ### Conditional fields
-It is possible to make the presence of a field depends on another field's value.
-To achieve this you just have to add a `visibleIf` property to a field's definition.
-Adding the value `$ANY$` to the array of conditional values,will make the field visible for any value inserted.
+It is possible to make the presence of a field depends on another field's value.  
+To achieve this you just have to add a `visibleIf` property to a field's definition.  
+
+**Value**  
+The value to match is set as array item.  
+Setting multiple items will make the visiblity condition `true` if one of the values matches.  
+If it is required to match all values head over to the section `visibleIf` with `allOf` condition.  
+
+**$ANY$**  
+Adding the value `$ANY$` to the array of conditional values, will make the field visible for any value inserted. 
 
 ```js
 @Component({
@@ -564,7 +571,9 @@ export class AppComponent {
   }
 }
 ```
+**$EMPTY$**  
 Assigning an empty Object to 'visibleIf' is interpreted as _visibleIf_ nothing, thereby the widget is hidden and not present in model.
+
 ```js
 mySchema = {
     "properties": {

package.json

@@ -8,7 +8,8 @@
     "copy:schema": "node -e \"var src='./schema/ngx-schema-form-schema.json'; var dest='./dist/schema-form/ngx-schema-form-schema.json'; var fs = require('fs'); if (fs.existsSync(src)) { var data = fs.readFileSync(src, 'utf-8'); fs.writeFileSync(dest, data);}\"",
     "build:lib": "ng build --prod schema-form && npm run copy:schema && cp ./README.md ./dist/schema-form/",
     "build-demo": "ng build --prod --base-href /ngx-schema-form/dist/ngx-schema-form/",
-    "test": "ng test schema-form --watch=false",
+    "test:lib": "ng test schema-form --watch=false",
+    "test": "ng test --watch=false",
     "lint": "ng lint",
     "get_version": "cat ./projects/schema-form/package.json | grep version  | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'"
   },

projects/schema-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-schema-form",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/guillotinaweb/ngx-schema-form"

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

@@ -233,7 +233,7 @@ export abstract class FormProperty {
     targetProperty: FormProperty,
     dependencyPath: string,
     value: any = '',
-    expression: string|string[]|number = ''): boolean {
+    expression: string | string[] | number | number[] | boolean | boolean[]): boolean {
     try {
       let valid = false
       if (isNaN(expression as number) && (expression as string).indexOf('$ANY$') !== -1) {
@@ -252,8 +252,13 @@ export abstract class FormProperty {
           }
         }
       } else {
-        valid = !!value ? expression.toString() === value.toString() : false;
-
+        const expArray = Array.isArray(expression) ? expression : (expression ? [expression] : [])
+        for (const expString of expArray) {
+          valid = !!value ? `${expString}` === `${value}` : false;
+          if (valid) {
+            break
+          }
+        }
       }
       return valid
     } catch (error) {
@@ -266,7 +271,11 @@ export abstract class FormProperty {
     }
   }
 
-  private __bindVisibility(): boolean {
+  /**
+   * binds visibility conditions of type `oneOf` and `allOf`.
+   * @returns `true` if any visibility binding of type `oneOf` or `allOf` has been processed. Otherwise `false`.
+   */
+  private __bindVisibility_oneOf_or_allOf(): boolean {
     /**
      * <pre>
      *     "oneOf":[{
@@ -299,9 +308,19 @@ export abstract class FormProperty {
                   if (property) {
                     let valueCheck;
                     if (this.schema.visibleIf.oneOf) {
-                      valueCheck = property.valueChanges.pipe(map(
-                        value => this.__evaluateVisibilityIf(this, property, dependencyPath, value, visibleIf[dependencyPath])
-                      ));
+                      const _chk = (value) => {
+                        for (const item of this.schema.visibleIf.oneOf) {
+                          for (const depPath of Object.keys(item)) {
+                            const prop = this.searchProperty(depPath);
+                            const propVal = prop.value;
+                            if (this.__evaluateVisibilityIf(this, prop, dependencyPath, propVal, item[depPath])) {
+                              return true
+                            }
+                          }
+                        }
+                        return false;
+                      };
+                      valueCheck = property.valueChanges.pipe(map(_chk));
                     } else if (this.schema.visibleIf.allOf) {
                       const _chk = (value) => {
                         for (const item of this.schema.visibleIf.allOf) {
@@ -332,8 +351,11 @@ export abstract class FormProperty {
           }
 
           combineLatest(propertiesBinding, (...values: boolean[]) => {
+            if (this.schema.visibleIf.allOf) {
+              return values.indexOf(false) === -1;
+            }
             return values.indexOf(true) !== -1;
-          }).pipe(distinctUntilChanged()).subscribe((visible) => {
+          }).subscribe((visible) => {
             this.setVisible(visible);
           });
         }
@@ -344,7 +366,7 @@ export abstract class FormProperty {
 
   // A field is visible if AT LEAST ONE of the properties it depends on is visible AND has a value in the list
   public _bindVisibility() {
-    if (this.__bindVisibility())
+    if (this.__bindVisibility_oneOf_or_allOf())
       return;
     let visibleIf = this.schema.visibleIf;
     if (typeof visibleIf === 'object' && Object.keys(visibleIf).length === 0) {

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

@@ -19,7 +19,7 @@ describe('JsonSchemaExampleComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        SchemaFormModule,
+        SchemaFormModule.forRoot(),
         HttpClientModule
       ],
       declarations: [ JsonSchemaExampleComponent ],

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

@@ -14,6 +14,7 @@ import binding_sample_schema from './binding_sample_schema.json';
 import binding_sample_model from './binding_sample_model.json';
 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 {AppService, AppData} from '../app.service';
 import {ISchema} from 'ngx-schema-form';
@@ -39,6 +40,7 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy {
     {label: 'Sample 2 - Custom bindings', event: this.changeSchemaWithBindings, selected: false},
     {label: 'Sample 3 - Otherschema', event: this.changeSchemaOtherschema, selected: false},
     {label: 'Sample 4 - Visibility binding', event: this.changeSchemaVisibilityBinding, selected: false},
+    {label: 'Sample 5 - Visibility binding 2', event: this.changeSchemaVisibilityBinding2, selected: false},
   ];
 
   constructor(
@@ -212,6 +214,14 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy {
     this.actions = {};
   }
 
+  changeSchemaVisibilityBinding2() {
+    this.schema = visibility_binding_example2 as unknown as ISchema;
+    this.model = {};
+    this.fieldBindings = {};
+    this.fieldValidators = {};
+    this.actions = {};
+  }
+
   disableAll() {
     Object.keys(this.schema.properties).map(prop => {
       this.schema.properties[prop].readOnly = true;