Trying to update generated angular6-json-schema-form on the fly

Question

I'm trying to use angular6-json-schema-form to display different forms in my angular 8 application.

I have created a FormTemplate model that holds some properties about the form that needs to be displayed and made this object an observable and also made it available through a shared service with the notation

@Injectable({
    providedIn: 'root'
})

In my different components, I am observing this object and I am in fact receiving notifications via the next() method every time I make changes to the object.

In one of my components, I am using the json-schema-form selector to display a form while making sure I'm using property binding for schema, layout and data like so:

<json-schema-form
loadExternalAssets="true"
[schema]="currentSchema"
[layout]="currentLayout"
[(data)]="currentData"
[debug]="true" 
language="fr"
framework="material-design"
(onChanges)="onJsonSchemaFormChange($event)"
(onSubmit)="onJsonSchemaFormSubmit($event)"
(isValid)="isValidJsonSchemaForm($event)"
(validationErrors)="jsonSchemaFormValidationErrors($event)"
(formSchema)="showJsonSchemaFormSchema($event)"
(formLayout)="showJsonSchemaFormLayout($event)"
>
</json-schema-form>

I know I am using 2 way binding for the data property, but this was taken from the examples and I expected it to work as is.

When I change the value of this.currentData inside the next() method located in my component's .ts file, the form does not get updated and refreshed on screen.

next(myFormTemplate: FormTemplate) {

    //This shows the values before the change, exactly as they appear on screen on the generated form
    console.log('BEFORE');
    console.log(this.currentData);

    this.currentData = {
        first_name: 'new',
        last_name: 'very new'
    };

    //This shows the updated values after the change, even though it's not updated on screen on the generated form
    console.log('AFTER');
    console.log(this.currentData);
}

I really need this to work as my real goal is to display a form and let the user toggle between this form and a second one using a dropdown. I expected the form to be dynamically modified every time I change the schema, layout or data.

Can anyone help?

Thanks!

Answer 1

It turns out that this had nothing to do with angular6-json-schema-form. I tried the same thing with a span that displays the interpolation of a string property inside my object and changing the value in the next() method did not work as well.

After much trials, I discovered that the way I was subscribing to the Observer (calling subscribe and passing "this" while making sure I was defining the next() and error() method elsewhere in the class thus satisfying the PartialObserver interface) made it so that, even though ngZone was telling me that the code being executed in the next() method was happening in the Angular Zone, change detection was not happening. By defining my next() method inline while subscribing made my problems disappear.

Answer 2

To add to the accepted answer. I had a similar goal and a similar issue, I have tried multiple things but I was using [(model)] instead of [(data)] to bind my form values, I've noticed on here that you're using [(data)] so I decided to try that, it didn't work but I then tried the one way binding so [data] and that worked like a charm!