diff --git a/src/organisms/gv-schema-form-control.js b/src/organisms/gv-schema-form-control.js index 968f9542..c250591c 100644 --- a/src/organisms/gv-schema-form-control.js +++ b/src/organisms/gv-schema-form-control.js @@ -43,6 +43,7 @@ export class GvSchemaFormControl extends LitElement { errors: { type: Array }, value: { type: Object, reflect: true }, skeleton: { type: Boolean, reflect: true }, + hidden: { type: Boolean, reflect: true }, }; } @@ -325,6 +326,10 @@ export class GvSchemaFormControl extends LitElement { display: block; } + :host([hidden]) { + display: none; + } + .form__control-description, .form__control-error { font-size: 12px; diff --git a/src/organisms/gv-schema-form.js b/src/organisms/gv-schema-form.js index d116c0f2..1459ca3b 100644 --- a/src/organisms/gv-schema-form.js +++ b/src/organisms/gv-schema-form.js @@ -69,6 +69,7 @@ export class GvSchemaForm extends LitElement { this._touch = false; this._validator = new Validator(); this._validatorResults = {}; + this._ignoreProperties = []; this.addEventListener('gv-schema-form-control:default-value', this._onDefaultValue.bind(this)); this.addEventListener('gv-schema-form-control:change', this._onChange.bind(this)); this.addEventListener('gv-schema-form-control:control-ready', this._onControlReady.bind(this)); @@ -117,7 +118,7 @@ export class GvSchemaForm extends LitElement { _onSubmit() { const validatorResults = this.validate(); - if (validatorResults.valid) { + if (this.isValid()) { this._initialValues = deepClone(this._values); this.dirty = false; this._touch = false; @@ -236,7 +237,10 @@ export class GvSchemaForm extends LitElement { const control = { ...this.schema.properties[key] }; const isRequired = this.schema.required && this.schema.required.includes(key); const isDisabled = (this.schema.disabled && this.schema.disabled.includes(key)) || this._evaluateCondition(control, 'disabled'); - + const isHidden = this._evaluateCondition(control, 'hidden'); + if (isHidden) { + this._ignoreProperties.push(key); + } const value = get(this._values, key); return html``; } @@ -321,6 +326,7 @@ export class GvSchemaForm extends LitElement { `; } const keys = this.schema.properties ? Object.keys(this.schema.properties) : []; + this._ignoreProperties = []; return html`${keys.map((key) => this._renderControl(key))}`; } @@ -335,7 +341,7 @@ export class GvSchemaForm extends LitElement { validate() { if (this.schema) { this._validatorResults = this._validator.validate(this._values, this.schema); - if (this._validatorResults.valid) { + if (this.isValid()) { this.errors = []; } else { this.errors = this._validatorResults.errors; @@ -345,7 +351,14 @@ export class GvSchemaForm extends LitElement { } isValid() { - return this._validatorResults.valid; + if (this._validatorResults.valid) { + return true; + } + + const errors = (this._validatorResults.errors || []).filter((error) => { + return !this._ignoreProperties.includes(error.property.replace('instance.', '')); + }); + return errors.length === 0; } canSubmit() { diff --git a/stories/organisms/gv-schema-form.test.js b/stories/organisms/gv-schema-form.test.js index 5b70eca5..00bd22c1 100644 --- a/stories/organisms/gv-schema-form.test.js +++ b/stories/organisms/gv-schema-form.test.js @@ -48,6 +48,7 @@ describe('S C H E M A F O R M', () => { 'multiselect', 'cron', 'disabled', + 'hidden', ]; const checkControl = (id, attributes = []) => { diff --git a/stories/resources/schemas/mixed.json b/stories/resources/schemas/mixed.json index e494c63f..8c3778b7 100644 --- a/stories/resources/schemas/mixed.json +++ b/stories/resources/schemas/mixed.json @@ -150,6 +150,22 @@ "x-schema-form": { "disabled": [{ "$def": "select" }, { "$eq": { "select": "a" } }] } + }, + "hidden": { + "title": "Hidden field if 'Simple select' is 'a'", + "type": "string", + "x-schema-form": { + "hidden": [ + { + "$def": "select" + }, + { + "$eq": { + "select": "a" + } + } + ] + } } }, "required": ["multiselect", "timeToLiveSeconds"]