Rendering Issues with input Description and format: "password"

General
1

I have two Problems here. First the Description has Problems with the translation implemented like this “SELF_SERVICE.CHANGE_PASSWORD.DESCRIPTION”. Other fields like label and error messages are working, but the Description does not.

Second Problem is, that in the repeat-password property the combination with const $data (to handle the validation between the new-password field) and format: password does not work. The other two Properties work with password format, but the last one not.

Maybe you have some hints, hopefully without a custom renderer.

“@jsonforms/angular”: “^3.5.1”,
“@jsonforms/angular-material”: “^3.5.1”, (angularMaterialRenderers)
“@jsonforms/core”: “^3.5.1”,
Angular 19 Project

{
    "type": "object",
    "properties": {
      "oldPassword": {
        "type": "string",
        "description": "Enter your current password."
      },
      "newPassword": {
        "type": "string",
        "minLength": 6,
        "maxLength": 8,
        "pattern": "^(?=.*[A-Z])(?=.*\\d)(?=.*\\W).*$",
        "description": "New password must meet the policy requirements."
      },
      "repeatPassword": {
        "type": "string",
        "const": {
          "$data": "1/newPassword"
        },
        "description": "Repeat password must match the new password."
      }
    },
    "required": ["oldPassword", "newPassword", "repeatPassword"]
  }

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/oldPassword",
      "options": {
        "format": "password"
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/newPassword",
      "options": {
        "format": "password",
        "autocomplete": "new-password",
        "aria-describedby": "password-policy-list"
      }
    },
    {
      "type": "Control",
      "scope": "#/properties/repeatPassword",
      "options": {
        "format": "password"
      }
    }
  ]
}
2

Hi @maltzahns,

You are right, I checked and found that the description in Angular Material is not translated. That’s an oversight. We actually have the translated description available in the props, but we also need to consume it.

This happens because of the const field in the schema. The autocomplete renderer detects the const and returns a higher priority than the text field renderer. However the autocomplete renderer does not spport the format: password in the UI Schema.

To solve this you should re-register the text.renderer Control of Angular Material with a much higher priority, for example when the format: password is given.

3

I opened a PR to fix the issue with the translated descriptions: fix: use translated description in Angular Material by sdirix · Pull Request #2454 · eclipsesource/jsonforms · GitHub

4

Thank you for the Support. That worked well with the re-register.

1 Like