Angular read-only/disabled form

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 rules 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.