I'm using Draft-js with Formik with yup for validation of the Draft EditorState component.
I assumed I would be able to check that EditorState is not blank by using the following yup test:
//Each note has a string title and a body, which is a Draft EditorState
const validationSchema = yup.object().shape({
title: yup.string(),
body: yup.object()
.test("has text", "Cannot save an empty note", (value) => {
return value.getCurrentContent().hasText(); //boolean
}),
})
However, I get the error:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.esm.js:491) at formik.esm.js:174
Is this a bug with formik, or am I using yup incorrectly?
Other information:
Inside validationSchema, I get the following:
console.log(value.getCurrentContent().hasText()) //returns undefined
console.log(value.getCurrentContent()) //returns undefined
But inside an onChange handler for EditorState ('body' field) it works properly:
console.log(value.getCurrentContent().hasText()) //returns true or false
This works for me with version 0.10.5:
value._editorState.getCurrentContent().hasText()
This worked for me for Formik#1.5.7 and yum#0.27.0
Yup.object()
.test(
'has text',
'Cannot save an empty note',
value => value && value.blocks && value.blocks[0].text.length
).required('This field is required.'),
And also i had to do some other tricks to trigger touched object and field set of Yum.
onChange={(field, value) => {
setFieldValue(field, value)
}}
onFocus={(field) => {
setFieldTouched(field)
}}
Related
I have a CDK project and I need to have input parameters and some of them have to be optional.
In my code I need to have a value in any case, so I'm looking a way to set a value if the user left the field empty.
I found some things with Fn.conditionIf and CfnCondition but I don't understand how to use them to achieve what I want.
Here is what I have:
const param1 = new CfnParameter(this, "Param1", {
type: "String",
description: "Myparam",
});
Later on my code I'm getting the value and here I need to set something if is empty:
var myObj = {
myParamFromUser: param1.valueAsString,
};
If I use default value field, that value is displayed on the Console and the field has already the value. I want to have the field empty on the Console.
How to set a value if param1 is empty?
I made it work:
const myCfnParam = new CfnParameter(this, "Param", {
type: "String",
description:
"Input param",
});
const myCondition = new CfnCondition(this, 'Condition', { expression: Fn.conditionEquals(myCfnParam, '') });
const myValue= Fn.conditionIf(myCondition.logicalId, 'MY_STRING', myCfnParam.valueAsString).toString();
For a Project I use yup and I have some trouble extending a Schema when a property is set.
I build a Codesandbox to show my Problem but the basics are the following.
// Schema I want to extend by, I use it in other places which is why I want to spread it into the baseSchema
const baseSchema = yup.object({
firstName: yup.string().required()
}).required();
const extendedSchema = yup
.object({
hasOtherFields: yup
.mixed()
.required()
.oneOf([...TRUE_FLASE])
})
.when("hasOtherFields", {
is: (value?: typeof TRUE_FLASE[number]) =>
value != null && value === "true",
then: (schema) =>
schema
.shape({
...baseSchema.fields
})
.required()
})
.required();
So the property hasOtherFields needs to be set and needs to be either "true" or "false". If it is "true", I extend the extendedSchema with shape and pass in the fields from another the baseSchema which has a required string field.
Sadly this doesn't work ... If I create a nested object property inside the object declaration like so
const extendedSchema = yup
.object({
hasOtherFields: yup
.mixed()
.required()
.oneOf([...TRUE_FLASE]),
extendedFields: yup.object({}).when("hasOtherFields", {
is: (value?: typeof TRUE_FLASE[number]) =>
value != null && value === "true",
then: (schema) =>
schema
.shape({
...baseSchema.fields
})
.required()
})
})
it works, but that doesn't really work for my use case.
So my question is, is there a way ? I basically want the type to look like this
type Schema = {hasCoApplicant: "false"} | {hasCoApplicant: "true"; firstName: string};
I have a parameter Type which is coming as Integer. If Type is 0 we show "Protect" otherwise Unprotect
My Controller is something like this
new Column({
label: new Label({text: "Type"}),
template: new Label({text:
{
path: "ruleType",
formatter: function (value) {
if(parseInt(value) === 0)
return "Protect";
else
return "Unprotect";
}
}}),
filterProperty: "ruleType"
})
My View is something like this
var vQuery = oEvent.getParameter("searchparam");
new Filter({
path: 'ruleType',
operator: FilterOperator.Contains,
value1: vQuery
}),
I have 2 issues
Uncaught Error: Only "String" values are supported for the FilterOperator: "Contains".
When I search with search value : "Protect" filter is not working.
I tried changing FilterOperator.Contains to FilterOperator.EQ string error is gone but search with "Protect" is not working. Can someone help
You can write a custom test function (I always convert the string and search query to lower case).
var vQuery = oEvent.getParameter("searchparam").toLowerCase();
new Filter({
path: 'ruleType',
test: function(value){
return value.toLowerCase().indexOf(vQuery) > -1 //returns true/false
}
});
I've recently noticed that when I attempt to set the value for a binding in Word Online for a selection of text that is a part of a bulleted list, numbered list, or multilevel list using the setDataAsync() method, I get the following error:
code: 5001 message: An internal error has occurred
Here is the code that I am trying to run (where bindingId is the binding ID of an already created binding within the document):
Office.select(`bindings#${bindingId}`).setDataAsync(
'test', { coercionType: 'text' }, (asyncResult) => {
if (asyncResult.status === 'failed') {
console.error(asyncResult.error.message);
}
console.log('success');
}
);
The way to reproduce this is by creating a numbered or bulleted list in a document in Word Online, and select some text that is part of one of the bullets or numbered items. Then create a binding for that selection using this code:
Office.context.document.bindings.addFromSelectionAsync(
'text', (asyncResult) => {
if (asyncResult.status === 'succeeded') {
console.log('success');
} else {
console.error('failed');
}
}
);
After the binding is created, you can try to set the binding's value to something using the setDataAsync() code from above. This will generate the An internal error has occurred error.
Thanks in advance for any insight!
I am trying to create a validator in angular2 where I need to check the value of another form field. I have two scenarios I have tried where I have attempted to do this.
Scenario 1, form field looks like this:
Form = this._fb.group({
ansat: ['', [<any>Validators.required]],
helbred: ['', this.someValidator('ansat')],
});
I have the two fields above, and I would like to be able to check the value of "ansat" in the validator function "someValidator". someValidator looks like this:
someValidator(key: string) {
return (group: FormGroup) => {
console.log(group);
console.log(group.controls[key].value);
}
}
In my function, group includes all the correct information for my formgroup, but "controls" is undefined, which means I cannot get to the value of "ansat.
Scenario 2, form field looks like this:
this.myForm = this._fb.group({
ansat: ['', [<any>Validators.required]],
helbred: ['', c => Validators.compose([
this.someValidator(c,
group => group.controls['ansat'].value === 0
),
])]
});
And this is my someValidator function:
conditional(c, conditional) {
console.log(conditional);
console.log(c);
if(c.parent != undefined || c._parent != undefined){
if(c._parent.controls['ansat'].value === 0){
console.log(c._parent.controls['ansat'].value);
}
}
return null;
}
In this case, the control "c", has the correct information and includes a parent which is the group it is allocated in, but I cannot access it to try and get it's brother in the same group.
And in the case of conditional parameter, I tried sending the group through a function which I cannot make to get working either.
QUESTION: I would like to be able to access the value of "ansat" inside of a validator that I call on "helbred". How do I do this?
Any help is greatly appreciated!
Have a look at this plunker.
You're on the right track, you must pass the actual ansat control in the helbred control's validator, instead of only passing ansat control's value.
ansat: AbstractControl = new FormControl('', Validators.required);
helbred: AbstractControl = new FormControl('', Validators.required, this.someValidator(this.ansat));
this.myForm = this.formBuilder.group({
ansat: this.ansat,
helbred: this.helbred
});