Hello. Is there a way to set a whole form to be read-only or disabled when using Angular?
[original thread by eebsie]
Hello. Is there a way to set a whole form to be read-only or disabled when using Angular?
[original thread by eebsie]
Hi @eebsie ,
there is a method:
setReadonly,
unsetReadonly
} from '@jsonforms/core';
You can use it this way:
setReadonly(this.uiSchema);
// or
unsetReadonly(this.uiSchema);
This way the uiSchema will be modified and the readonly flag set/removed to/from all controls.
[glockenbach]
I have followed this example and I can see that the uiSchema
gets mutated to include options.readonly: true
. However this has no effect during rendering. The fields are still “enabled”.
I am using @jsonforms/vue2
. Can you tell if it is not supported or if I have missed something?
[glockenbach]
Update: I was able to disable the fields by adding a rule to the ui-element:
{
scope: "#/properties/_id",
type: "Control"
rule: {
effect: "DISABLE",
condition: {
scope: "#/properties/_id",
}
}
}
Hi @llundin(llundin), the setReadonly
and unsetReadonly
utility functions are outdated. As you noticed they modify the ui schema. The Vue renderers don’t yet respect options.readonly: true
which is why these utility functions don’t work. However we’re working on that: Support readonly defined in JSON Schema and UI Schema · Issue #1735 · eclipsesource/jsonforms · GitHub. Until this is implemented you’ll need to use rule
s to disable single controls.
However for form-wide read-only/disabled there is a much better approach (see Readme): The json-forms
component accepts a global readonly
flag which will disable all controls.