Are you an LLM? You can read better optimized documentation at /front/component/ma-form/examples/basic-usage.md for this page in Markdown format
Basic Usage β
Demonstrates the basic usage of MaForm, including common form control configurations and core features.
Features β
- Multiple Input Types: Text input, password field, number input, etc.
- Automatic Data Binding: Two-way data binding without manual handling
- Basic Validation Rules: Supports required fields, length, format, and other common validations
- Simple Component Configuration: Quickly build forms through declarative configuration
- Native Compatibility: Fully compatible with Element Plus native properties and events
Core Concepts β
Declarative Development β
Configure form items through the items
array, where each configuration object contains:
label
: Form item labelprop
: Data field name for bindingrender
: Type of component to renderrenderProps
: Properties passed to the component
Data Binding β
Use v-model
for two-way data binding:
vue
<ma-form v-model="formData" :items="formItems" />
1
Common Configuration Examples β
Basic Input Field β
typescript
{
label: 'Username',
prop: 'username',
render: 'input',
renderProps: {
placeholder: 'Please enter username',
clearable: true
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Password Input Field β
typescript
{
label: 'Password',
prop: 'password',
render: 'input',
renderProps: {
type: 'password',
showPassword: true,
placeholder: 'Please enter password'
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Number Input Field β
typescript
{
label: 'Age',
prop: 'age',
render: 'inputNumber',
renderProps: {
min: 0,
max: 150,
controlsPosition: 'right'
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10