Ngx-formly: FieldGroup level validation messages using JSON powered config

Created on 22 Mar 2019  路  1Comment  路  Source: ngx-formly/ngx-formly

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior

I'm using Formly throught JSON config only. I'm wondering if it's already supported to add validation messages at fieldGroup level instead of field based on the overall state of the form.

Let's say that my form is currently invalid, I want to display XYZ message underneath the fields part of fieldGroup array.

Basically my structure is like this:

[
    {
        "fieldGroupClassName": "row h-100 align-items-center",
        "fieldGroup": [
            {
                "key": "field1",
                "expressionProperties": {
                    "required": "some expression"
                }
            },
            {
                "key": "field2",
                "expressionProperties": {
                    "required": "some expression"
                }
            },
            {
                "key": "field3",
                "expressionProperties": {
                    "required": "some expression"
                }
            },
            {
                "key": "field4",
                "expressionProperties": {
                    "required": "some expression"
                }
            }
        ],
        "validation": {
            "messages": {
                "required": "my custom validation message"
            }
        }
    }
]

Expected behavior

Instead of displaying the required messages underneath every fields, I need to display ONE global message at fieldGroup level.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Angular version: 6.0.X

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

question

Most helpful comment

I've decided to let this part to end-users since UIs don't provide a proper way to display validation message for grouped fields.

It can be done using one of the following methods:

  1. using errorPath https://formly.dev/examples/validation/matching-two-fields
  2. Custom extension https://stackblitz.com/edit/angular-c7tkp9
  3. Overriding fieldGroup type

>All comments

I've decided to let this part to end-users since UIs don't provide a proper way to display validation message for grouped fields.

It can be done using one of the following methods:

  1. using errorPath https://formly.dev/examples/validation/matching-two-fields
  2. Custom extension https://stackblitz.com/edit/angular-c7tkp9
  3. Overriding fieldGroup type
Was this page helpful?
0 / 5 - 0 ratings