I have multiple formArrays inside a form variable. On adding vuelidate validations to these formArrays/collections, Array.push doesn't work properly.
FormArray and Form Data
data() {
return {
form: {
experience: [{
employerName: '',
department: '',
from: null,
to: null,
tillDate: false,
type: null,
noOfYears: null,
noOfMonths: null,
other: null,
}],
name: '',
email: '',
phone: null,
course: null,
Vuelidate validation rules
validations: {
form: {
experience: {
$each: {
type: {
requiredIf: requiredIf(function() {
return this.openExperience;
}),
},
other: {
requiredIf: requiredIf((obj) => obj.type === 'Other'),
},
noOfMonths: {
minValue: minValue(0),
maxValue: maxValue(11),
},
noOfYears: {
minValue: minValue(0),
},
},
},
name: {
required,
},
email: {
email,
},
phone:{
numeric
},
dateOfBirth: {
maxValue(val){
return this.$dateFns.sub(new Date(),{years: 18}) > new Date(val);
}
},
},
},
Function to add formArray
addExperience(){
this.form.experience.push({
employerName: '',
department: '',
from: null,
to: null,
tillDate: false,
type: null,
noOfYears: null,
noOfMonths: null,
other: null,
});
const length = 'experience' + (this.form.experience.length-2).toString();
document.getElementById(length).scrollIntoView();
},
I tried removing the vuelidate rules and it worked as expected. Screen Recording
I had a computed property named 'open'. In the getter for the property, I clear the entire form for a specific condition. It turns out that adding another formGroup (Array.push) to the formArray would end up invoking all the computed properties, and in turn, calling the getter for 'open' and clearing the form.
I ended up moving the code block in the computed property getter to the mounted life-cycle hook and it works fine now.
Related
In my application, I have validated the input credential at the DTO level by using class-validator. But I need runtime model validation like sequelize ORM.
In sequelize:
'use strict';
import { DataTypes, Sequelize } from 'sequelize';
function User(sequelize: Sequelize) {
const user = sequelize.define(
'User',
{
name: {
type: DataTypes.STRING,
allowNull: false
},
role: {
type: DataTypes.STRING(20),
allowNull: false
},
email: {
type: new DataTypes.STRING,
allowNull: false,
validate: {
isEmail: {
// args: true,
msg: 'Invalid email'
},
len: {
args: [1, 100] as readonly [number, number],
msg: 'Email length should be 1 to 100 characters'
},
notNull: {
// args: true,
msg: 'Email cannot be empty'
}
}
},
password: {
type: DataTypes.VIRTUAL,
allowNull: true,
},
},
{
tableName: 'users',
underscored: true,
createdAt: 'created_at',
updatedAt: 'updated_at',
deletedAt: 'deleted_at',
paranoid: true
}
);
return user;
}
export default User;
Is there any possibility to do model validation in Prisma?
There is an open feature request for Prisma to support runtime model validation directly at the Schema level. Alternatively, you can leverage the Client Extensions to perform validation. There is an example in this blog post that shows how to perform custom runtime validation.
I'm trying get a insertion into an object at Vue, but I can't...
data: {
formValid: {},
buttonIsDisabled: true,
statusModal: 'active',
},
methods: {
closeModal() {
this.statusModal = ''
this.formValid.test = "test"
}
},
watch: {
formValid: {
handler(o, n) {
console.log(o)
console.log(n)
},
deep: true
}
}
When I do 'this.formValid.test = "test"' I don't go to Watch, but if I have this object into of the formValid and I change it, in this case, I go to Watch.
Do you know how can I get this event?
You cannot add reactive properties to an object on the fly with Vue2 like this.
You'll need to either define them in data:
data: {
formValid: {
test: '',
},
buttonIsDisabled: true,
statusModal: 'active',
},
or use:
Vue.set(this.formValid, 'test', 'test');
I'm unable to figure out how to construct a graphql query for performing the mongodb fulltext search using the text index. https://docs.mongodb.com/manual/text-search/
I've already created a text index on my string in the mongoose schema but I don't see anything in the schemas that show up in the grapqhl playground.
A bit late, though I was able to implement it like so
const FacilitySchema: Schema = new Schema(
{
name: { type: String, required: true, maxlength: 50, text: true },
short_description: { type: String, required: true, maxlength: 150, text: true },
description: { type: String, maxlength: 1000 },
location: { type: LocationSchema, required: true },
},
{
timestamps: true,
}
);
FacilitySchema.index(
{
name: 'text',
short_description: 'text',
'category.name': 'text',
'location.address': 'text',
'location.city': 'text',
'location.state': 'text',
'location.country': 'text',
},
{
name: 'FacilitiesTextIndex',
default_language: 'english',
weights: {
name: 10,
short_description: 5,
// rest fields get weight equals to 1
},
}
);
After creating your ObjectTypeComposer for the model, add this
const paginationResolver = FacilityTC.getResolver('pagination').addFilterArg({
name: 'search',
type: 'String',
query: (query, value, resolveParams) => {
resolveParams.args.sort = {
score: { $meta: 'textScore' },
};
query.$text = { $search: value, $language: 'en' };
resolveParams.projection.score = { $meta: 'textScore' };
},
});
FacilityTC.setResolver('pagination', paginationResolver);
Then you can assign like so
const schemaComposer = new SchemaComposer();
schemaComposer.Query.addFields({
// ...
facilities: Facility.getResolver('pagination')
// ...
});
On your client side, perform the query like so
{
facilities(filter: { search: "akure" }) {
count
items {
name
}
}
}
I have declared state and getters in my vuex where I want to get new price and title of the existing products in state.
When I have declared the return data in the getters It is throwing a syntax error and which is ; expected , given.
But from my point of view it is correct so what is the exact error?
state: {
value1: 1,
products: [
{ title: 'Hp1', price: 500 },
{ title: 'Hp2', price: 600 },
{ title: 'Hp3', price: 700 },
]
},
getters: {
saleProducts: state => {
var newProductsList = state.products.map(product => {
return
{
title: '** '+ product.title +' **',
price: product.price/2 + " % Off"
}
});
return newProductsList;
}
}
This is a bit bizzarre. When I copied and pasted your code then it doesn't work. When I type it in by hand myself from your example, then it works. Usually this sort of thing means that you've got an invalid ASCII character in the mix somewhere. The main thing I changed was to using double quotes instead of single quotes:
state: {
value1: 1,
products: [
{ title: 'Hp1', price: 500 },
{ title: 'Hp2', price: 600 },
{ title: 'Hp3', price: 700 },
]
},
getters: {
saleProducts: state => {
var newProductsList = state.products.map(product => {
return {
title: "** " + product.title + " **",
price: product.price/2 + " % Off"
}
})
}
},
See if you can spot the difference. Here's the codesandbox.io link: https://codesandbox.io/s/ywr1v7my19
Browse to /store/modules/main.js to see it in situ.
What I have is an object like this:
formData = {
name: {
value: '',
valid: true
},
zip: {
value: 'ff',
valid: false
},
//...
}
And I want to filter this so that I only have the invalid objects. The problem with _.where and _.filter is that it returns an object like this:
[
0: {
value: '',
valid: false
},
1: {
value: '',
valid: false
}
]
I need the parent key names, name and zip to be included. How do I do this?
You are looking for _.pick() my friend.
https://lodash.com/docs#pick
_.pick(formData, function(value) {
return value.valid;
})
Good luck! :)