I'm trying to fix a bug in a form. The form is built with Formik and a custom react component called GenericForm which basically handles the validation and maps an array of objects into the form sub-component renders.
const advancedFields = [
{
label: "Power Factor",
id: "powerFactor",
type: "number",
value: "",
isRequired: useAdvancedOptions,
},
{
label: "Efficiency",
id: "efficiency",
type: "number",
value: "",
isRequired: useAdvancedOptions,
},
];
The variable useAdvancedOptions is part of the component state, updated with the new react hook and a Switch component.
<FormControlLabel control={ <Switch onChange={
() => setUseAdvancedOptions(!useAdvancedOptions)
}color={"primary"}/>}label="Advanced Options"/>
So the bug... when I toggle advancedOptions on and off with the switch, if the field has been touched, the submit button won't validate if there are no values inside the two advanced fields, even when the fields have been excluded from the form.
When I use Chrome debugger and inspect the variable useAdvancedOptions inside the field objects, it appears that the boolean values for isRequired are updating as anticipated, so I'm not sure why the button is still trying to require the field.
Validation was broken, when it would read one of the values that existed in formic and filter it, the iteration that was taking the removed advanced option value would take null into the switch case and fail. I wrote a conditional to return before the switch statement if the iteration filter resulted in null.
Related
I have a custom format frmt defined, but I want to be able to tell if the format is already applied to the selection before executing execCommand('mceToggleFormat', false, 'frmt') since it isn't just a matter of toggling the <frmt> tags because I use AJAX to also fetch a ID in the tag, i.e. <frmt id='nnn'>. queryCommandState('frmt') always returns false. What am I doing wrong?
Here's the code:
ed.addButton('frmt', {
text: 'FRMT',
onclick: function() {
// I've tried using ed.queryCommandState('frmt') here to test if 'frmt' is already applied.
editor_content(ed, 'frmt'); // This uses ed.insertContent to add id='nnn'
ed.execCommand('mceToggleFormat', false, 'frmt');
}
})
Created a form with button actions 'Approved' and 'Rejected' and selected workflow 'One step approval'.But after approving/rejecting the form status is still shown as 'New'.Is there anything missing from my side
You missed adding custom code for updating the action Type at the form Design. just adding the button from form design for update the Application Status . You need to define when to emit the customEvent with actionComplete Type example use the below for approved.
form.emit('customEvent', {
type: "actionComplete",
component: component,
actionType: "Approved" // action Type you need to pass
});
Click here to know more custom Events Available
Find a sample code from the Freedom of Information form given as a sample below which does a similar behaviour :
const submissionId = form._submission._id;
const formDataReqUrl = form.formio.formUrl+'/submission/'+submissionId;const formDataReqObj1 = { "_id": submissionId, "data": data};
const formio = new Formio(formDataReqUrl);
formio.saveSubmission(formDataReqObj1).then( result => {
form.emit('customEvent', {
type: "actionComplete",
component: component,
actionType: "data.actionType" // action Type you need to pass
});
}).catch((error)=>{
//Error callback on not Save
});
You need to choose custom Action on the button as shown:
I'm building a angular 2 (2.0.0-rc.4) application with the new form API (2.0.2) and i've got a problem when i'm trying to update checkbox form controls with updateValue().
This is what i've done:
I've built a dynamic form with the new form API (based on the section in the cookbook: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html). I've extended the form class to also handle checkboxes:
export class FormControlCheckbox extends FormBase <string> {
controlType: string;
options: { key: string, value: string, checked: boolean } [] = [];
checked: boolean = false;
constructor(options: {} = {}) {
super( options );
this.controlType = "checkbox";
this.options = options['options'] || [];
this.checked = this.options[0].checked;
}
}
This is what it looks like when it's created:
new FormControlCheckbox({
type: "checkbox",
label: 'A label',
name: "a-name",
value: "",
description: "a description",
options: [
{
label: 'A label',
name: "a-name",
checked: false
}
],
})
When the application are loaded the form controls are created and grouped together, everything works fine and the form get submitted as intended. I only had to do a workaround to make the checkbox update on change and the markup are as followed:
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = $event.target.checked">
I've also tried this markup (it also works fine):
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = check.checked" #check>
This is where my problem occurs
I'm adding a feature that updates the control values when the form just have been loaded (the user should be able to revisit the page and update previous values). The code below update all the control values.
for (var key in new_values) {
//the form control keys are the same as the key in the list of new_values
this.form.controls[key].updateValue(new_values[key]); //works for text, select and option
this.form.controls[key].updateValueAndValidity(); //not sure if needed?
this.form.controls[key].markAsDirty();
}
Text, option and select inputs gets updated but the checkboxes are unchanged. No errors or warnings. I've searched a lot for similar problems but have not found a similar problem or a solution.
Am I missing something obvious? Or have somebody had the same problem and want to share their solution?
Thanks!
Solved the problem by changing the values before creating the control-groups (before this it's possible to change the values (ex. x.value). It solved my problem but do not solve the fact that dynamically changes to checkbox form controls are not reflected in the DOM element.
I am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.
I'm trying to add a new FilteringSelect widget dynamically to a preexisting form I made out of declarative tags (on page load).
prereqs = 0;
function addAnotherPrerequisite(){
var newPreReqCursor = dijit.byId("Prerequisite"+(prereqs-1)).domNode;
dojo.create("input",{
id:"prerequisite"+prereqs,
jsId:"Prerequisite"+prereqs,
dojoType:"dijit.form.FilteringSelect",
store:"PrerequisitesStore",
searchAttr:"name",
style:"width: 350px;",
required:"true",
class: "appendedPreReq"},newPreReqCursor,"after");
dojo.parser.parse( newPreReqCursor.parentNode );
prereqs++;
}
This code properly builds a FilteringSelect widget, but the widget does not seem to be registered with the form. Whenever I submit the form, none of the values in the new widgets appear. The validation attribute works, though, and it properly pulls the values from the store.I can even call the new widget via its jsId(Prerequisite1, Prerequisite2, etc) It just won't POST!
Instead of dojo.create I also tried called the FilteringSelect widget directly. This also made the widget, but did not register the values with the form during POSTing.
var filteringSelect = new dijit.form.FilteringSelect({
id: "prereq"+prereqs,
jsId: "Prerequisite"+prereqs,
store: PrerequisitesStore,
searchAttr: "name",
required: true,
style: 'width: 350px;',
class: 'appendedPreReq'
},
"prerequisite"+prereqs).startup();
I'm going crazy trying to figure this out.
So it looks like there's some sort of bug or something. I had to define the 'name' attribute explicitly to get the widget to show up in my form's .getDependents() method. That's how dijit.forms gets its list of form values. After doing this I also couldn't access this widget by dijit.byId (didn't return anything, silently caught the error I guess), so I returned the object via its jsId with an eval.
prereqs = 0;
function(){
var newPreReqCursor = eval("Prerequisite"+(prereqs-1));
newPreReqCursor = newPreReqCursor.domNode;
dojo.create("input",{
id:"Prerequisite"+prereqs,
name:"Prerequisite"+prereqs,
jsId:"Prerequisite"+prereqs,
dojoType:"dijit.form.FilteringSelect",
store:"PrerequisitesStore",
searchAttr:"name",
style:"width: 350px;",
required:"true",
class: "appendedPreReq"},newPreReqCursor,"after");
var filterSelect = dojo.parser.parse( newPreReqCursor.parentNode );
}
It is very easy. Just create a new object like that:
// first let's create an empty node (you can reuse the existing one)
var node = dojo.create("div", {
// all necessary node attributes
className: "appendedPreReq",
style: {
width: "350px"
}
}, "myAnchorNodeId", "after");
// now let's create a widget
var widget = new dijit.form.FilteringSelect(
{
// all necessary widget properties
id: "prereq" + prereqs,
store: PrerequisitesStore,
searchAttr: "name",
required: true
},
node // optional node to replace with the widget
);
Read all about it:
http://docs.dojocampus.org/dijit/info
http://docs.dojocampus.org/dijit/form/FilteringSelect
yes while creating widgets as said by Eugene Lazutkin the input type hidden related with the filtering select gets the name as of the id, and also the value of the hidden field is updating correctly. But when the filtering select is created thr .create() method we need to give the name , and also the value of the hidden field is not updating after we select some values from the filtering select(even when we blur out). Eugene Lazutkin can you let me know why its happening so... how to update the value of hidden field in the .create() method.