Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form: clearValidate supports prop names #11821

Merged
merged 1 commit into from
Jul 2, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/docs/en-US/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -852,7 +852,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
| validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) |
| validateField | 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 | -
| clearValidate | clear validation message for certain fields. The parameter is an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: array)

### Form Events
| Event Name | Description | Parameters |
Expand Down
2 changes: 1 addition & 1 deletion examples/docs/es/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -857,7 +857,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| validate | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
| clearValidate | limpia mensaje de validación para todos los campos | -
| clearValidate | clear validation message for certain fields. The parameter is an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: array)

### Form Events
| Nombre | Descripción | Parametros |
Expand Down
4 changes: 2 additions & 2 deletions examples/docs/zh-CN/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -839,8 +839,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|---------- |-------------- | --------------
| validate | 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise | Function(callback: Function(boolean, object))
| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
| resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 | -
| clearValidate | 移除整个表单的校验结果 | -
| resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组,如不传则移除整个表单的校验结果 | Function(props: array)

### Form Events
| 事件名称 | 说明 | 回调参数 |
Expand Down
7 changes: 5 additions & 2 deletions packages/form/src/form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,11 @@
field.resetField();
});
},
clearValidate() {
this.fields.forEach(field => {
clearValidate(props = []) {
const fields = props.length
? this.fields.filter(field => props.indexOf(field.prop) > -1)
: this.fields;
fields.forEach(field => {
field.clearValidate();
});
},
Expand Down
58 changes: 58 additions & 0 deletions test/unit/specs/form.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,64 @@ describe('Form', () => {
done();
});
});
it('clear validate', done => {
vm = createVue({
template: `
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动地址" prop="address">
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
`,
data() {
return {
form: {
name: '',
address: '',
type: []
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
address: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
]
}
};
}
}, true);
const form = vm.$refs.form;
const nameField = form.fields.filter(field => field.prop === 'name')[0];
const addressField = form.fields.filter(field => field.prop === 'address')[0];
form.validate();
vm.$nextTick(() => {
expect(nameField.validateMessage).to.equal('请输入活动名称');
form.clearValidate(['name']);
vm.$nextTick(() => {
expect(nameField.validateMessage).to.equal('');
form.clearValidate();
vm.$nextTick(() => {
expect(addressField.validateMessage).to.equal('');
done();
});
});
});
});
it('form item nest', done => {
vm = createVue({
template: `
Expand Down
4 changes: 2 additions & 2 deletions types/form.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,6 @@ export declare class ElForm extends ElementUIComponent {
/** reset all the fields and remove validation result */
resetFields (): void

/** clear validation message for all fields */
clearValidate (): void
/** clear validation message for certain fields */
clearValidate (props?: string[]): void
}