Advanced Layout (Flex columns) in json schema

[ezequiel-gg]

Question

How can i make an advance layout like this:
https://stackblitz.com/edit/angular-yp4t9a?file=src%2Fapp%2Fapp.component.ts
but in json schema .
its possible to add 'fieldGroup' in a json schema? thanks!

[aitboudad]

you can pass FormlyConfig through widget.formlyConfig:

{
  "type": "object",
+ "widget": { "formlyConfig": { "fieldGroupClassName": "row" } },
  "properties": {
    "firstName": {
      "type": "string",
+     "widget": { "formlyConfig": { "className": "col-6" } }
    },
    "lastName": {
      "type": "string",
+     "widget": { "formlyConfig": { "className": "col-6" } }
    },
  }
}

object.type.ts

+ <div [class]="field.fieldGroupClassName">
  <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
+ </div>

https://stackblitz.com/edit/angular-lmdq82

[dorijangrgic]

Hi,

Can you, somehow, create multiple fieldGroups inside one object type? I would like to have a form like this (https://formly.dev/examples/other/advanced-layout-flex) but using json schema.

Thank you

[aitboudad]

Can you, somehow, create multiple fieldGroups inside one object type? I would like to have a form like this (formly.dev/examples/other/advanced-layout-flex) but using json schema.

yes, use map callback #1982 (comment)

[dorijangrgic]

thanks for the quick response, I have one more question. is there a possibility to define multiple fieldGroups inside an existing json schema? the map callback function iterates over fields defined in a properties object inside a json schema. can you define multiple properties objects so that when map callback function is called, I already have multiple fieldGroups?

for example, the schema below creates one fieldGroup property : [firstName, lastName, age, bio, password, telephone]. I would like to have multiple fieldGroup properties inside one object field type. something like [firstName, lastName], [age, bio], [password, telephone]

{
	"title": "A registration form",
	"description": "A simple form example.",
	"type": "object",
	"required": [
		"firstName",
		"lastName"
	],
	"properties": {
		"firstName": {
			"type": "string",
			"title": "First name",
			"default": "Chuck"
		},
		"lastName": {
			"type": "string",
			"title": "Last name"
		},
		"age": {
			"type": "integer",
			"title": "Age"
		},
		"bio": {
			"type": "string",
			"title": "Bio"
		},
		"password": {
			"type": "string",
			"title": "Password",
			"minLength": 3
		},
		"telephone": {
			"type": "string",
			"title": "Telephone",
			"minLength": 10
		}
	}
}

[dorijangrgic]

@aitboudad I am really sorry to bother you, but can you give me an answer on the possibility of such implementation? It would be extremely helpful to me.

[aitboudad]

Hi @dorijangrgic,
json schema doesn't support a such case so the easy solution is to use map (as mentioned above), another way if you want to control the group using a generic solution you may use a custom extension alongside widget property.

1. widget: custom groups

{
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
+ "widget": {
+   "formlyConfig": {
+     "templateOptions": { "groups": ['firstName', 'lastName'], ['age', 'bio'], ['password', 'telephone'] }
+   }
  }
}

2- Define a custom extension which adjust the field group based on groups property.
https://main.formly.dev/guide/custom-formly-extension

[Shourya2100]

Hi @aitboudad !! I am working on a similar issue of generating multiple fieldgroups from the json schema. Just wanted to know that with the approach that you have suggested of using custom extensions, Do we also need to use ngx-translate to map the JSON schema to fieldConfig ?