Altinn / app-frontend-react

Altinn application React frontend
BSD 3-Clause "New" or "Revised" License
16 stars 24 forks source link

Validation message formatting/layout when using the Address component is not good #1951

Closed martinothamar closed 2 weeks ago

martinothamar commented 2 months ago

Description of the bug

When following the dev course in Altinn docs, you are tasked with implementing validation according to the screenshot below. There are some issues with formatting

image

Steps To Reproduce

  1. Create a repeating group containing an Address component
  2. Implement validation, for instance

    public Task<List<ValidationIssue>> ValidateFormData(
        Instance instance,
        DataElement dataElement,
        object data,
        string language
    )
    {
        List<ValidationIssue> issues = [];
    
        if (data is not Skjema skjema)
            throw new Exception("Invalid data type");
    
        for (int i = 0; i < skjema.Innflytter.TidligereBosteder.Count; i++)
        {
            var bosted = skjema.Innflytter.TidligereBosteder[i];
            if (bosted.Postnr == "1337" && !bosted.Gateadresse.Contains("🌟"))
            {
                issues.Add(
                    new ValidationIssue()
                    {
                        // InstanceId = instance.Id,
                        DataElementId = dataElement.Id,
                        Field = $"Innflytter.TidligereBosteder[{i}].Postnr",
                        Description = """
                            Vi er beæret over å motta en '1337' innbygger til Sogndal kommune!
                            Du må imidlertid bekrefte din uovertruffenhet ved å legge til en 🌟 i adressefeltet for å gå videre.
                        """,
                        Severity = ValidationIssueSeverity.Error
                    }
                );
            }
        }
    
        return Task.FromResult(issues);
    }

Additional Information

No response