# Angular read-only/disabled form

**URL:** <https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186>\
**Category:** General\
**Created:** [August 13, 2020, 12:24pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186 "2020-08-13T12:24:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [August 13, 2020, 12:24pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186/1 "2020-08-13T12:24:36Z")

</div>

Hello. Is there a way to set a whole form to be read-only or disabled when using Angular?

_[[original thread](https://spectrum.chat/jsonforms/general/angular-readonlydisabled-form~cfc8ec47-c113-4b30-9c09-0ed9ab626527) by eebsie]_

---

<div class="post-metadata">

**Author:** ![eneufeld](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/eneufeld/32/10_2.png) [@eneufeld](https://jsonforms.discourse.group/u/eneufeld)\
**Post date:** [August 13, 2020, 1:14pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186/2 "2020-08-13T13:14:31Z")

</div>

Hi @eebsie ,  
there is a method:

```auto
setReadonly,
unsetReadonly
} from '@jsonforms/core';

```

You can use it this way:

```auto

setReadonly(this.uiSchema);
// or
unsetReadonly(this.uiSchema);

```

This way the uiSchema will be modified and the readonly flag set/removed to/from all controls.

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 15, 2021, 12:33pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186/3 "2021-06-15T12:33:13Z")

</div>

_[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?

---

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 15, 2021, 1:08pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186/4 "2021-06-15T13:08:08Z")

</div>

_[glockenbach]_

**Update:** I was able to disable the fields by adding a rule to the ui-element:

```auto
{
    scope: "#/properties/_id",
    type: "Control"
    rule: {
        effect: "DISABLE",
        condition: {
          scope: "#/properties/_id",
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 15, 2021, 2:37pm UTC](https://jsonforms.discourse.group/t/angular-read-only-disabled-form/186/5 "2021-06-15T14:37:34Z")

</div>

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](https://github.com/eclipsesource/jsonforms/issues/1735). 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)](https://github.com/eclipsesource/jsonforms/tree/master/packages/vue/vue#usage): The `json-forms` component accepts a global `readonly` flag which will disable all controls.