1 | <template>
|
2 | <form class="el-form" :class="[
|
3 | labelPosition ? 'el-form--label-' + labelPosition : '',
|
4 | { 'el-form--inline': inline }
|
5 | ]">
|
6 | <slot></slot>
|
7 | </form>
|
8 | </template>
|
9 | <script>
|
10 | import objectAssign from 'element-ui/src/utils/merge';
|
11 |
|
12 | export default {
|
13 | name: 'ElForm',
|
14 |
|
15 | componentName: 'ElForm',
|
16 |
|
17 | provide() {
|
18 | return {
|
19 | elForm: this
|
20 | };
|
21 | },
|
22 |
|
23 | props: {
|
24 | model: Object,
|
25 | rules: Object,
|
26 | labelPosition: String,
|
27 | labelWidth: String,
|
28 | labelSuffix: {
|
29 | type: String,
|
30 | default: ''
|
31 | },
|
32 | inline: Boolean,
|
33 | inlineMessage: Boolean,
|
34 | statusIcon: Boolean,
|
35 | showMessage: {
|
36 | type: Boolean,
|
37 | default: true
|
38 | },
|
39 | size: String,
|
40 | disabled: Boolean,
|
41 | validateOnRuleChange: {
|
42 | type: Boolean,
|
43 | default: true
|
44 | }
|
45 | },
|
46 | watch: {
|
47 | rules() {
|
48 | if (this.validateOnRuleChange) {
|
49 | this.validate(() => {});
|
50 | }
|
51 | }
|
52 | },
|
53 | data() {
|
54 | return {
|
55 | fields: []
|
56 | };
|
57 | },
|
58 | created() {
|
59 | this.$on('el.form.addField', (field) => {
|
60 | if (field) {
|
61 | this.fields.push(field);
|
62 | }
|
63 | });
|
64 |
|
65 | this.$on('el.form.removeField', (field) => {
|
66 | if (field.prop) {
|
67 | this.fields.splice(this.fields.indexOf(field), 1);
|
68 | }
|
69 | });
|
70 | },
|
71 | methods: {
|
72 | resetFields() {
|
73 | if (!this.model) {
|
74 | process.env.NODE_ENV !== 'production' &&
|
75 | console.warn('[Element Warn][Form]model is required for resetFields to work.');
|
76 | return;
|
77 | }
|
78 | this.fields.forEach(field => {
|
79 | field.resetField();
|
80 | });
|
81 | },
|
82 | clearValidate(props = []) {
|
83 | const fields = props.length
|
84 | ? this.fields.filter(field => props.indexOf(field.prop) > -1)
|
85 | : this.fields;
|
86 | fields.forEach(field => {
|
87 | field.clearValidate();
|
88 | });
|
89 | },
|
90 | validate(callback) {
|
91 | if (!this.model) {
|
92 | console.warn('[Element Warn][Form]model is required for validate to work!');
|
93 | return;
|
94 | }
|
95 |
|
96 | let promise;
|
97 |
|
98 | if (typeof callback !== 'function' && window.Promise) {
|
99 | promise = new window.Promise((resolve, reject) => {
|
100 | callback = function(valid) {
|
101 | valid ? resolve(valid) : reject(valid);
|
102 | };
|
103 | });
|
104 | }
|
105 |
|
106 | let valid = true;
|
107 | let count = 0;
|
108 |
|
109 | if (this.fields.length === 0 && callback) {
|
110 | callback(true);
|
111 | }
|
112 | let invalidFields = {};
|
113 | this.fields.forEach(field => {
|
114 | field.validate('', (message, field) => {
|
115 | if (message) {
|
116 | valid = false;
|
117 | }
|
118 | invalidFields = objectAssign({}, invalidFields, field);
|
119 | if (typeof callback === 'function' && ++count === this.fields.length) {
|
120 | callback(valid, invalidFields);
|
121 | }
|
122 | });
|
123 | });
|
124 |
|
125 | if (promise) {
|
126 | return promise;
|
127 | }
|
128 | },
|
129 | validateField(prop, cb) {
|
130 | let field = this.fields.filter(field => field.prop === prop)[0];
|
131 | if (!field) { throw new Error('must call validateField with valid prop string!'); }
|
132 |
|
133 | field.validate('', cb);
|
134 | }
|
135 | }
|
136 | };
|
137 | </script>
|