mirror of
https://github.com/discourse/discourse.git
synced 2024-12-25 19:13:44 +08:00
f6a4de4805
Collections were an existing concept in FormKit but didn't allow nesting. You can now do infinite nesting:
```gjs
<Form
@data={{hash
foo=(array
(hash bar=(array (hash baz=1))) (hash bar=(array (hash baz=2)))
)
}}
as |form|
>
<form.Collection @name="foo" as |parent parentIndex|>
<parent.Collection @name="bar" as |child childIndex|>
<child.Field @name="baz" @title="Baz" as |field|>
<field.Input />
</child.Field>
</parent.Collection>
</form.Collection>
</Form>
```
On top of this a new component has been added: `Object`. It allows you to represent objects in your form data. Collections are basically handling arrays, and Objects are objects.
This is useful if you form data has this shape for example:
```javascript
{ foo: { bar: 1, baz: 2 } }
```
This can now be mapped in your form using this syntax:
```gjs
<Form @data={{hash foo=(hash bar=1 baz=2)}} as |form|>
<form.Object @name="foo" as |object name|>
<object.Field @name={{name}} @title={{name}} as |field|>
<field.Input />
</object.Field>
</form.Object>
</Form>
```
Objects accept nested collections and nested objects. Just like Collections.
A small addition has also been made to `Collection`, they now support a custom `@tagName`, it's useful if each item of your collection is the row of a table for example.
|
||
|---|---|---|
| .. | ||
| _alert.scss | ||
| _char-counter.scss | ||
| _checkbox-group.scss | ||
| _col.scss | ||
| _collection.scss | ||
| _conditional-display.scss | ||
| _container.scss | ||
| _control-checkbox.scss | ||
| _control-code.scss | ||
| _control-composer.scss | ||
| _control-custom-value-list.scss | ||
| _control-custom.scss | ||
| _control-icon.scss | ||
| _control-image.scss | ||
| _control-input-group.scss | ||
| _control-input.scss | ||
| _control-menu.scss | ||
| _control-password.scss | ||
| _control-radio.scss | ||
| _control-select.scss | ||
| _control-textarea.scss | ||
| _default-input-mixin.scss | ||
| _errors-summary.scss | ||
| _errors.scss | ||
| _field.scss | ||
| _fieldset.scss | ||
| _form-kit.scss | ||
| _index.scss | ||
| _meta.scss | ||
| _object.scss | ||
| _row.scss | ||
| _section.scss | ||
| _variables.scss | ||