Altinn / Altinn/app-frontend-react

V4 - To contain validation error messages inside a page

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

Description

### Description

We have the following page in our app where we send in all the different validation errors from the backend on page load.
![image](https://github.com/Altinn/app-frontend-react/assets/3437949/2cbe839b-a2f4-4620-9732-d8021eaf2e35)

We select the public division probate option and click the next button which navigates us to the next page.
![image](https://github.com/Altinn/app-frontend-react/assets/3437949/7cac991c-b6aa-4746-90be-0f958b2bb40b)

When I as a user click the "Lagre mitt valg"-button, I should get an error message, which I do.
![image](https://github.com/Altinn/app-frontend-react/assets/3437949/8dfbcb94-f671-4ab9-9768-a010302b27cd)

Now I have to think if I chose the correct form of probate, therefore I go back to make sure. I click the back button in the form.
I am now back to the start but I still see the validation error.
![image](https://github.com/Altinn/app-frontend-react/assets/3437949/a96789d1-7baa-4c3a-aab3-6c69158137eb)

Our NavigationButton component looks like this:
```
{
"id": "NavigationButtons-dsadAS",
"type": "NavigationButtons",
"showBackButton": false,
"textResourceBindings": {
"next": "ProbateTexts.SaveMyChoice.Text"
},
"validateOnNext": {
"page": "current",
"show": ["AllExceptRequired"]
}
}
```

What we would like is to contain the validation error inside the page for Public division, because when the user has decided to go back to the main page, the error is no longer valid for the user.

Contributor guide

Open the contributing guide

Research direction

Start with the NavigationButton component and its validateOnNext handling, especially the current-page and AllExceptRequired settings shown in the issue. Reproduce the back-navigation flow, then trace how validation messages are retained between pages. Done means an error from the Public division page is no longer displayed after navigating back to the main page.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.