Fields & Form

Fields are the core of a preset. Each field tells AutoForm which element to fill, how to generate its value, and which arguments should be passed to the generation method. This is also one of the most powerful parts of AutoForm, since methods can receive different types of arguments.

Adding a field

A field can be added to a preset from the preset editor.

Each field contains, at minimum:

• Query Selector
• Method
• Options

Editing a field

Query selector

The Query Selector identifies the HTML element that AutoForm should fill. It accepts a standard CSS selector, so you can use selectors supported by document.querySelector().

For example: #email input[name="email"] form input[type="text"] [data-testid="username"]

You can combine CSS selectors when necessary: form#signup input[name="email"]

Tip: Prefer selectors that uniquely identify the target field and are unlikely to change.

Method

The Method defines how the field value will be generated.

AutoForm provides generators from:

• Faker
• Box4Dev
• Custom methods created by the user

See the corresponding generator documentation for the complete list of available methods.

• Faker methods
• [Box4Dev methods]((https://box4.dev/en/npm-packages/gerador-br/docs)

You can also create your own methods. See Custom Methods.

Configuring field arguments

Method can receive some arguments. The Options field accepts JSON5, and it is used to configure and pass arguments to generators

JSON5 is used instead of standard JSON because it allows a more convenient syntax while still supporting JSON-compatible values.

Multiple Arguments

Some methods, such as methods from Box4Dev, can receive multiple arguments. In this case, pass the arguments as an array.

For example:

[
  "first argument",
  "second argument",
  100
]

The values in the array are passed to the method in the same order.

Options Object

Some methods receive a single options object, which is common with Faker methods. In this case, pass an object directly:

{
  min: 18,
  max: 60
}

The object is passed as the first argument of the method.

Primitive Values

JSON5 also supports primitive values.

You can therefore pass values such as: true "example" 42

When a primitive is provided, it is passed as the first argument of the method.

For example, a method that expects a string can receive: "hello"

Passing an array as an argument

There is an important distinction between:

["one", "two", "three"]

and:

[["one", "two", "three"]]

The first form represents multiple arguments. The second form represents one argument whose value is an array.

Hack: passing an array as a single argument If you need to pass an array as the argument of a method, wrap it in another array:

[
  ["one", "two", "three"]
]

The outer array represents the method arguments, while the inner array is the actual argument.

The same rules apply to custom methods

All of the argument rules described above also apply to custom methods.

For example, if your custom method is:

(value) => value

you can pass: "hello"

If it receives multiple arguments:

(a, b) => `${a}-${b}`

you can pass: ["hello", "world"]

If it recever an options object:

(options) => `${options.name} are ${options.age} years old`

you can use:

{
  name: "John",
  age: "28"
}

And if the method expects an array as its first argument:

(items) => items.join(", ")

you can use:

[
  ["one", "two", "three"]
]

Sorting dields

Tip: You can reorder fields by clicking and dragging the handle to the desired position.

Deleting a field

A field can be removed from the preset at any time.

Removing a field only removes it from the current preset. It does not affect the generator method itself.

This is especially important for custom methods: deleting a field that uses a custom method does not delete the custom method.

See Custom Methods for more information.