Skip to content

Commit 39fdd46

Browse files
committed
working on the FormlyField component
1 parent 987977d commit 39fdd46

File tree

2 files changed

+235
-212
lines changed

2 files changed

+235
-212
lines changed

src/components/FormlyField.vue

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
11
<template>
2-
<component :is="type" :form.sync="form" :key="key"></component>
2+
<component :is="type" :form.sync="form" :field="field" :model="model"></component>
33
</template>
44

55
<script>
66
const Vue = require('vue');
77
import Util, {getTypes, setError} from '../util';
88
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(){
1817
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, {});
2120
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+
}
2827
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;
3130
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;
3538
36-
let validator = field.validators[validKey];
39+
let validator = this.field.validators[validKey];
3740
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+
});
5045
}
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+
}
5255
</script>

0 commit comments

Comments
 (0)