Skip to content

Commit

Permalink
Form: clearValidate supports prop names
Browse files Browse the repository at this point in the history
  • Loading branch information
Leopoldthecoder committed Jul 2, 2018
1 parent 04d2891 commit daa292d
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 8 deletions.
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
}

0 comments on commit daa292d

Please sign in to comment.