mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 20:28:52 +08:00
Form: add clearValidate (#7623)
* Form: add clearValidate * remove dup attrs
This commit is contained in:
杨奕
GitHub
parent
c3cf3f2389
commit
36dfe304f3
@ -47,6 +47,16 @@
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
@ -745,33 +755,33 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||
|
||||
::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="120px" size="mini">
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone">
|
||||
<el-select v-model="form.region" placeholder="please select your zone">
|
||||
<el-select v-model="sizeForm.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-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.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-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource" size="medium">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="Sponsor"></el-radio>
|
||||
<el-radio border label="Venue"></el-radio>
|
||||
</el-radio-group>
|
||||
@ -781,6 +791,30 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||
<el-button>Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -806,6 +840,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
|
||||
| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
|
||||
| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | reset all the fields and remove validation result | — |
|
||||
| clearValidate | clear validation message for all fields | -
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
|
||||
@ -47,6 +47,16 @@
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
@ -734,34 +744,34 @@
|
||||
|
||||
::: demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
|
||||
```html
|
||||
<el-form ref="form" :model="form" label-width="80px" size="mini">
|
||||
<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
<el-input v-model="sizeForm.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-select v-model="sizeForm.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.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="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox-group v-model="sizeForm.type">
|
||||
<el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
|
||||
<el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource" size="medium">
|
||||
<el-radio-group v-model="sizeForm.resource" size="medium">
|
||||
<el-radio border label="线上品牌商赞助"></el-radio>
|
||||
<el-radio border label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
@ -771,6 +781,30 @@
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
console.log('submit!');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -796,6 +830,7 @@
|
||||
| validate | 对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean))
|
||||
| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
|
||||
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
|
||||
| clearValidate | 移除整个表单的校验结果 | -
|
||||
|
||||
### Form-Item Attributes
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
},
|
||||
sizeClass ? 'el-form-item--' + sizeClass : ''
|
||||
]">
|
||||
<label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
|
||||
<label :for="labelFor" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
|
||||
<slot name="label">{{label + form.labelSuffix}}</slot>
|
||||
</label>
|
||||
<div class="el-form-item__content" v-bind:style="contentStyle">
|
||||
@ -102,6 +102,9 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labelFor() {
|
||||
return this.for || this.prop;
|
||||
},
|
||||
labelStyle() {
|
||||
var ret = {};
|
||||
if (this.form.labelPosition === 'top') return ret;
|
||||
@ -207,6 +210,11 @@
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
},
|
||||
clearValidate() {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
this.validateDisabled = false;
|
||||
},
|
||||
resetField() {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
|
||||
@ -70,6 +70,11 @@
|
||||
field.resetField();
|
||||
});
|
||||
},
|
||||
clearValidate() {
|
||||
this.fields.forEach(field => {
|
||||
field.clearValidate();
|
||||
});
|
||||
},
|
||||
validate(callback) {
|
||||
if (!this.model) {
|
||||
console.warn('[Element Warn][Form]model is required for validate to work!');
|
||||
|
||||
@ -106,7 +106,6 @@
|
||||
placeholder: String,
|
||||
size: String,
|
||||
resize: String,
|
||||
icon: String,
|
||||
name: String,
|
||||
form: String,
|
||||
id: String,
|
||||
@ -115,7 +114,6 @@
|
||||
readonly: Boolean,
|
||||
autofocus: Boolean,
|
||||
disabled: Boolean,
|
||||
onIconClick: Function,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
@ -139,7 +137,6 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
onIconClick: Function,
|
||||
suffixIcon: String,
|
||||
prefixIcon: String,
|
||||
label: String
|
||||
|
||||
Loading…
Reference in New Issue
Block a user