mirror of https://github.com/ElemeFE/element
23 KiB
23 KiB
Form
Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.
Basic form
It includes all kinds of input items, such as input, select, radio and checkbox.
:::demo In each form component, you need a form-item field to be the container of your input item.
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="form.resource">
<el-radio label="Sponsor"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create</el-button>
<el-button>Cancel</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
:::
Inline form
When the vertical space is limited and the form is relatively simple, you can put it in one line.
:::demo Set the inline attribute to true and the form will be inline.
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
</el-form-item><el-form-item>
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item><el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
:::
Alignment
Depending on your design, there are several different ways to align your label element.
Top
:::demo The label-position attribute decides how labels align, it can be top or left. When set to top, labels will be placed at the top of the form field.
<el-form label-position="top" :model="formStacked" class="demo-form-stacked">
<el-form-item label="Name">
<el-input v-model="formStacked.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone">
<el-input v-model="formStacked.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formStacked: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
:::
Right
:::demo When label-position is omitted, labels will align to the right
<el-form :model="formAlignRight" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="Promote area">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="Form of activity">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
:::
Left
:::demo When label-position is set to top, labels will align to the left.
<el-form :model="formAlignLeft" label-position="left" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="Promotion area">
<el-input v-model="formAlignLeft.region"></el-input>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="formAlignLeft.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignLeft: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
:::
Validation
Form component allows you to verify your data, helping you find and correct errors.
:::demo Just add the rule attribute for Form component, pass validation rules, and set prop attribute for Form-Item as a specific key that needs to be validated. See more information at async-validator.
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="Activity name" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Activity zone" prop="region">
<el-select v-model="ruleForm.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Activity time" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery">
<el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="Online activities" name="type"></el-checkbox>
<el-checkbox label="Promotion activities" name="type"></el-checkbox>
<el-checkbox label="Offline activities" name="type"></el-checkbox>
<el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="Sponsorship"></el-radio>
<el-radio label="Venue"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Activity form" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">Create</el-button>
<el-button @click="handleReset">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
],
region: [
{ required: true, message: 'Please select Activity zone', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
],
resource: [
{ required: true, message: 'Please select activity resource', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please input activity form', trigger: 'blur' }
]
}
};
},
methods: {
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
:::
Custom validation rules
:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="Confirm" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit2">Submit</el-button>
<el-button @click="handleReset2">Reset</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('Please input digits'));
} else{
if (age < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('Two inputs don\'t match!'));
} else {
callback();
}
};
return {
ruleForm2: {
pass: '',
checkPass: '',
age: ''
},
rules2: {
pass: [
{ required: true, message: 'Please input the password', trigger: 'blur' },
{ validator: validatePass }
],
checkPass: [
{ required: true, message: 'Please input the password again', trigger: 'blur' },
{ validator: validatePass2 }
],
age: [
{ required: true, message: 'Please input the age', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
]
}
};
},
methods: {
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>
Delete or add form items dynamically
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
<el-form-item prop="email" label="Email">
<el-input v-model="dynamicForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains:' + index"
:rules="{
type: 'object', required: true,
fields: {
value: { required: true, message: 'domain can not be null', trigger: 'blur' }
}
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">Delete</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit3">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicForm: {
domains: [{
key: 1,
value: ''
}],
email: ''
},
dynamicRule: {
email: [
{ required: true, message: 'Please input email address', trigger: 'blur' },
{ type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
]
}
};
},
methods: {
handleSubmit3(ev) {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length,
value: ''
});
}
}
}
</script>
:::
Form Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model | data of form component | object | — | — |
| rules | validation rules of form | object | — | — |
| inline | whether the form is inline | boolean | — | false |
| label-position | position of label | string | left/right/top | right |
| label-width | width of label, and all form items will inherit from Form |
string | — | — |
| label-suffix | suffix of the label | string | — | — |
Form Methods
| Method | Description |
|---|---|
| validate(cb) | the method to validate the whole form |
| validateField(prop, cb) | the method to validate a certain form item |
| resetFields | reset all the fields and remove validation result |
Form-Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| prop | a key of model |
string | keys of model that passed to form |
|
| label | label | string | — | — |
| label-width | width of label, e.g. '50px' | string | — | — |
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |