Closed fairking closed 4 years ago
Maybe it could be something like this?
ISwaggerOptions = {
...
renderValidationModel: [ true | false ],
...
}
codegen output:
export class RoleVm {
name?: string;
description?: string;
static ValidationModel() {
return {
name: {
required,
minLength: 1,
maxLength: 50
},
description: {
maxLength: 150
}
}
}
}
It is interesting how easy we can bind the validation model with the vuelidate or VeeValidate.
vuelidate example (not sure it will work):
import { required, minLength, maxLength } from 'vuelidate/lib/validators'
export default {
data () {
return {
model: new RoleVm(),
}
},
validations: RoleVm.ValidationModel()
}
vee-validate example (not sure it will work):
<template>
<validation-provider rules="validations.name" v-slot="{ errors }">
<input v-model="model.name" name="name" type="text" />
<span>{{ errors[0] }}</span>
</validation-provider>
</template>
<script>
import { ValidationProvider, extend } from 'vee-validate';
import { required, minLength, maxLength } from 'vee-validate/dist/rules';
extend('required', { ...required, message: 'The {_field_} field is required' });
extend('minLength', { ...minLength, message: 'The {_field_} field must not be less than {_min_} characters' });
extend('maxLength', { ...maxLength, message: 'The {_field_} field must not be more than {_max_} characters' });
new Vue({
el: '#app',
components: {
ValidationProvider
},
data: () => ({
model: new RoleVm(),
validations: RoleVm.ValidationModel()
}),
});
<script>
This is good idea. Welcome PR
@denis-pujdak-adm-it
Would you like to add an example to Readme?
Hi @Manweill I am trying to integrate my project with vuelidate. Ones I done with it I'm gonna add some small example to the readme file.
I did some work in my project. I decided that the only rules I need in javascript are actually required
and maxlength
. I am not going to use vuelidate or any other similar approach. Everything else is covered by server side validation. My axios receives the 400 errors with the following model [{ field: 'name', message: 'The value must contain only letters and numbers' }]
. The model in my api is:
[Required]
[StringLength(50)]
[RegularExpression(@"^([a-zA-Z0-9])+$", ErrorMessage = "The value must contain only letters or numbers")]
public string Name { get; set; }
Where the [Required]
and [StringLength]
are covered by swagger-axios-codegen
. All other validations are server side validations and I am happy with that approach. If anyone would like to include more validation rules into the swagger-axios-codegen
feel free to create a PR.
My vuejs approach with swagger-axios-codegen
validationModel:
Mixin:
Vue.mixin(clientValidations());
function clientValidations() {
return {
data() {
return {
vModel: {},
};
},
methods: {
function isRequired(fieldName: string): boolean {
return (vModel && vModel[fieldName] && vModel[fieldName].required === true);
},
function maxLength(fieldName: string): number {
return (vModel && vModel[fieldName] && vModel[fieldName].maxLength ? vModel[fieldName].maxLength : 4000);
}
},
};
}
Component.vue
<template>
<div>
<label for="name">Name</name>
<input id="name" type='text' v-model="model.name" :required="isRequired('name')" :maxlength="maxLength('name')" />
<validation-message v-model="serverSideValidation('name')"></validation-message>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data() {
return {
model: new FooFormVm(),
}
},
created() {
this.vModel = FooFormVm.validationModel;
},
});
</script>
But I cannot see any problem with using vuelidate or vee-validate. You can easy translate the validationModel
into the rules your approach requires. Please let me know what do you think guys.
@fairking this issue can close?
Yes you can close. The most important things are covered. If someone needs more validation he/she can raise a new issue.
Would like to see something to be able to generate validation attributes among with model classes. It would be really cool.
My view model looks like this:
I got my api like this:
I am thinking about to implement client validation using vuelidate or VeeValidate
Is there any way to somehow translate model attributes using
swagger-axios-codegen
and use them in validation? Any ideas?