Altinn / Altinn/app-frontend-react

Support placing the required field indicator inside text resources

Open
#393 4 comments 0 reactions 0 assignees View on GitHub
area/validation kind/feature-request org/ssb
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description

The specific use case [described in this issue](/Altinn/altinn-studio/issues/8369) is that markup inside the text resource for an input `title` is defined as follows:
```html


Hvor mange ledige stillinger hadde virksomheten {0}?


```
When we simply append `*` for required input fields, this produces:
```html


Hvor mange ledige stillinger hadde virksomheten {0}?

*
```
And since an `h3` is a block object, the asterisk appears visually on the next line - instead of the same line, where the actual title is.

### Proposed solution
A simple solution would be to add an option on all form fields allowing you to hide the required field indicator (and add the asterisk manually to your text resources). However, we could/should expect the required indicator to change in the future (maybe we'll turn it red some day, maybe we'll use an icon), so a better solution would be to use a variable (maybe `{requiredIndicator}` or just `{required}`) we'll replace with the actual indicator (and replace it with nothing if the field is not required). As the required property on a field will be possible to control using [layout expressions](https://github.com/orgs/Altinn/projects/22), this solution is preferable.

For the above example, this could be illustrated as:
```html


Hvor mange ledige stillinger hadde virksomheten {0}? {requiredIndicator}


```

### Additional Information

- /Altinn/altinn-studio/issues/8369

Contributor guide

Open the contributing guide

Research direction

Start by tracing how form fields render required indicators and how markup in text resources is processed. Review the layout expressions that control the required property and determine where a required-indicator variable could be resolved. Done means the indicator appears inside the text-resource markup when required and is absent when the field is not required.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.