How to create Text Area in jsonForms in Angular 9

Can any one suggest how to use configured TextArea in JsonForms

[original thread by Fioyesuraj]

Hi @fioyesuraj(fioyesuraj), you can configure a text control to be multiline (i.e. a text area) by providing the multi option for it in the ui schema, e.g.

{
      "type": "Control",
      "scope": "#/properties/name",
      "options": {
        "multi": true
      }
}

[Fioyesuraj]

Thank you

[Chaofeng Wang]

How to make it happen when it comes to auto-generated UI schema?

Hi @chaofeng-wang(chaofeng-wang), the auto-generator can’t be influenced. If you want to keep using auto-generated ui schemas I see the following options:

  • Specify multi: true in the config object. This will lead to ALL texts being multiline

  • Use the ui schema generator outside of JSON Forms and adapt its output. The generator can be used like this:

import { Generate } from `@jsonforms/core`;
const uiSchema = Generate.uiSchema(schema);
  • Implement a custom text renderer which always renders inputs as text areas and tune the tester so that it applies only to the fields you intend to be multiline. The implementation is straightforward as you mainly need to delegate to the existing text renderer but manually specify the multi option.