|
1 | 1 | <template>
|
2 |
| - <component :is="type" :form.sync="form" :key="key"></component> |
| 2 | + <component :is="type" :form.sync="form" :field="field" :model="model"></component> |
3 | 3 | </template>
|
4 | 4 |
|
5 | 5 | <script>
|
6 | 6 | const Vue = require('vue');
|
7 | 7 | import Util, {getTypes, setError} from '../util';
|
8 | 8 | export default {
|
9 |
| - props: ['form', 'key'], |
10 |
| - computed: { |
11 |
| - type:function(){ |
12 |
| - return 'formly_'+this.form[this.key].type; |
13 |
| - } |
14 |
| - }, |
15 |
| - methods: { |
16 |
| - validate:function(){ |
17 |
| - let field = this.form[this.key]; |
| 9 | + props: ['form', 'model', 'field'], |
| 10 | + computed: { |
| 11 | + type:function(){ |
| 12 | + return 'formly_'+this.field.type; |
| 13 | + } |
| 14 | + }, |
| 15 | + methods: { |
| 16 | + validate:function(){ |
18 | 17 |
|
19 |
| - //first check if we need to create a field |
20 |
| - if ( !this.form.$errors[this.key] ) this.$set('form.$errors.'+this.key, {}); |
| 18 | + //first check if we need to create a field |
| 19 | + if ( !this.form.$errors[this.field.key] ) this.$set(this.form.$errors, this.field.key, {}); |
21 | 20 |
|
22 |
| - //check for required fields. This whole setting,unsetting thing seems kind of wrong though.. |
23 |
| - //there might be a more 'vue-ey' way to do this... |
24 |
| - if ( field.required ){ |
25 |
| - if ( !this.form.$errors[this.key].required ) this.$set('form.$errors.'+this.key+'.required', true); |
26 |
| - setError(this.form, this.key, 'required', !field.value) ; |
27 |
| - } |
| 21 | + //check for required fields. This whole setting,unsetting thing seems kind of wrong though.. |
| 22 | + //there might be a more 'vue-ey' way to do this... |
| 23 | + if ( this.field.required ){ |
| 24 | + if ( !this.form.$errors[this.field.key].required ) this.$set(this.form.$errors[ this.field.key ], 'required', true); |
| 25 | + setError(this.form, this.field.key, 'required', !this.model[ this.field.key ]) ; |
| 26 | + } |
28 | 27 |
|
29 |
| - //if we've got nothing left then return |
30 |
| - if ( !field.validators ) return; |
| 28 | + //if we've got nothing left then return |
| 29 | + if ( !this.field.validators ) return; |
31 | 30 |
|
32 |
| - Object.keys(field.validators).forEach((validKey) => { |
33 |
| - if ( !this.form.$errors[this.key][validKey] ) this.$set('form.$errors.'+this.key+'.'+validKey, false); |
34 |
| - if ( !field.required && !field.value ) return; |
| 31 | + //set these for the validators so we don't have to use 'this' in them |
| 32 | + let model = this.model; |
| 33 | + let field = this.field; |
| 34 | + |
| 35 | + Object.keys(this.field.validators).forEach((validKey) => { |
| 36 | + if ( !this.form.$errors[this.field.key][validKey] ) this.$set(this.form.$errors[ this.field.key ], validKey, false); |
| 37 | + if ( !this.field.required && !this.model[ this.field.key ] ) return; |
35 | 38 |
|
36 |
| - let validator = field.validators[validKey]; |
| 39 | + let validator = this.field.validators[validKey]; |
37 | 40 |
|
38 |
| - let valid = typeof validator == 'function' ? !validator(field) : !eval(validator); |
39 |
| - setError(this.form, this.key, validKey, valid); |
40 |
| - |
41 |
| - }); |
42 |
| - } |
43 |
| - }, |
44 |
| - components: getTypes(), |
45 |
| - created(){ |
46 |
| - this.validate(); |
47 |
| - this.$watch('form.'+this.key+'.value', (val) =>{ |
48 |
| - let valid = this.validate(); |
49 |
| - }); |
| 41 | + let valid = typeof validator == 'function' ? !validator(field) : !eval(validator); |
| 42 | + setError(this.form, this.field.key, validKey, valid); |
| 43 | + |
| 44 | + }); |
50 | 45 | }
|
51 |
| - } |
| 46 | + }, |
| 47 | + components: getTypes(), |
| 48 | + created(){ |
| 49 | + this.validate(); |
| 50 | + this.$watch('model.'+this.field.key, (val) =>{ |
| 51 | + let valid = this.validate(); |
| 52 | + }); |
| 53 | + } |
| 54 | + } |
52 | 55 | </script>
|
0 commit comments