how to reset to default/initial values after editing some values?

[Rajkapoor1]

Version(if relevant): 1.0.0

Environment(if relevant):

I'm using angular version 8.0.0

In HTML page, I have 'save' and 'reset' buttons.
what I want here is, once the page is loaded, JSON editor should load with initial values and if the user edit some values and click on the 'reset' button. all values should get clear and reset it with some default/initial values.
is there any way to reset the values?

below is html and ts code

<json-editor [schema]="schema"
[initialValue]="initialValue"
(updateValue)="updateValue($event)"
theme="bootstrap3">

<button id="reset" class="btn btn-submit" (click)="reset()">Reset
Save

and in app.component.ts
schema = {
type : 'object',
title: 'json editor',
properties: {
color: {
type: 'string',
default: 'red'
},
engine: {
type: 'string',
default: '1111'
}, required: ['color','engine']
}

initialValue= {
color: 'green',
engine: '88'
};

updateValue({ value, isValid }: common.ValidityValue<common.ValueType>) {
this.currentValues = values;
}
reset() {
//??
}

[plantain-00]

You can do it by cloning the initial value before passing it to the component

[Rajkapoor1]

cloning we can do, but how to set the cloned value to json editor, should I replace the IntialValue with cloned value?
reset() {
this.initialValue = this.clonedValue;
}

[Rajkapoor1]

is there any way to change the value through javascript and reflect the same in html?

[plantain-00]

Yes, replace the initial value, if the UI doesn't change, you can trigger a force change by ChangeDetectionStrategy or ngIf.

[Rajkapoor1]

I tried ChangeDetectionStrategy in reset() but it doesn't worked on json-editor.

below is code snippet.

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
constructor(
private changeDetector: ChangeDetectorRef
) { }

reset() {
this.initialValue = this.clonedValue;
this.changeDetector.detectChanges();
}

is there any set() method for json-editor where I can provide values to set something on some of the html element rendered by json-editor?

[Rajkapoor1]

ChangeDetectionStrategry works for other html element but it doesn't work for initialValue. seems that json-editor considers initialValue only when json editor's gets initialize i.e. during onInit() and it doesn't consider if we change the value of initialValue after rendering of json-editor.

[plantain-00]

No set() method.
You can google some tricks like: https://stackoverflow.com/a/56540964

[Rajkapoor1]

Yes, ng-if works but it's seems to hack so I don't want to go with it.
I was looking for something set() where you can provide the values and json-editor load it accordingly.

consider below schema where the user can select car make and accordingly predefined color and engine property should set.
so if the user selects Audi, I want to set predefined red color and 2500 as engine property. or a user can enter manually.

preset = {
'Audi' : { color : 'red', 'engine: '2500' },
'Tesla' : { color :'blue', 'engine':'1500'}
}

schema = {
type : 'object',
title: 'car settings Overrides:',
properties: {
carMake: {
type: 'string',
format: 'select',
enum: [
'car 1',
'car 2',
'other'
],
enumTitles: [
'Audi',
'Tesla',
'Other'
],
propertyOrder: 1
},
color: {
type: 'string',
default: 'red'
},
engine: {
type: 'string',
default: '1111'
},
transmission: {
type: 'string',
default : 'Auto'
}
}, required : ['carMake', 'color', 'engine']
};

[plantain-00]

Pull request is welcome if you want to improve this about set().