Help with making a GUI form builder

Hi! Thanks for your great work. I’m trying to create a GUI form builder similar in idea to https://github.com/json-schema-form/json-schema-builder, but with a different interface.

I’ve hacked a proof of concept together using custom bindings and temporarily a text area to edit the form property schema.

this.fieldBindings['/firstName'] = [{
   'click': this.selectPropertyToEdit.bind(this)
}];

selectPropertyToEdit(event, formProperty: FormProperty) {
  this.selectedProperty = formProperty.schema; // for display in the text area
  // use arrow function for closure
  this.onTextAreaChange = (data) => {
    const newSchema = JSON.parse(data);
    formProperty.schema.title = newSchema.title;
  }
}

<textarea (change)="onTextAreaChange($event.target.value)" [value]="selectedProperty | json"></textarea>

I’m having some problems and therefore questions:

1. Can I bind all the fields without explicitly specifying the path? Something like a wildcard bind, e.g. this.fieldBindings['/*']?
2. Can I modify an existing form property schema without explicitly setting each property? I’ve tried Object.assign(formProperty.schema, newSchema) and formProperty.schema = newSchema which both produces weird results, i.e. both end up duplicating the form field. There is nothing similar to formProperty.setValue() like formProperty.setSchema().

Any tips would be helpful also. Please point me in the right direction (if I’m going in the wrong one) or to any library/feature like this that already exists. Thanks.

[daniele-pecora]

@aahventures Probably 😁

[daniele-pecora]

@aahventures

I would provide a custom SchemaValidatorFactory which would be used in the UI Editor (See doc for details). The implementation of the SchemaValidatorFactory simply contains no validation at all. This should speed up the validation process.