I am using controller component of react-hook-form to call material UI autocomplete.
When I'm passing defaultValue parameter then it is populating in field but when click on submit button then showing validation error message:
shared_with_users must be a `array` type, but the final value was: `null` (cast from the value `{ "value": "571998", "label": "\"Satyendra Kumar\"" }`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`
Here is my code:
https://codesandbox.io/s/nervous-tree-9e2js?file=/src/App.js
Autocomplete is coming after selection of last select box. I am using yup for form validation.
Please suggest the fixes.
Thank you in advance
Issue is fixed now.
Problem was uncontrolled component, when i created controlled component then it started working properly.
Here is my updated code:
https://codesandbox.io/s/nervous-tree-9e2js?file=/src/App.js
Related
I would like to reset/clear my MUI Autocomplete component.
I have two of them with model like { label: string, value: string } and if first will change its value then I would like to clear the second one since second will get options by selected value in first one.
Moreover - I am using react-hook-form with setValue. I use as value in this method { label: '', value: '' } but it causes warning that in my new sort of options there is no such option to select (this is minor issue I think) but it does not reset second Autocomplete input but partially. I still see X to clear value. I used null as value in setValue but it does not cleat input as well.
What I want to achieve is - selecting some option on first input I would like to reset second input like clicking on X does. Is it possible ?
Cheers!
I found what caused the issue I describe above. It was because Autocomplete in my codebase was declared with clearOnBlur={false} props. It prevented to clear value of my Autocomplete when I was doing setValue(autocompleteFieldName, null) via react-hook-form. I hope it helps someone with the same strange issue since I was not interacting with input at all to invoke onBlur event. Cheers!
Case:
I have an array of answers which I want to show in the view as radio inputs. When one of the answers is already answered it must be [checked] and if it's [checked] a textarea shows, so far so good.
Next I want to check another radio input and I want the current selected to be deselected and its textarea hidden, then the new selected radio input should be [checked] and it's textarea should show.
I use the FormBuilder and FormArray and have following issues.
I can't use index without intrapolation, I see many examples where the index is used without.
If I select another radio input, first my data disappears and it's not checked and on the second click it get's checked but now both are checked.
- I don't have access to the checked event, I can show it in the view with {{tempVar.checked}} as you can see above, if I use a template variable #tempVar, but I don't have access to it in the textarea below *ngIf="tempVar.checked". If I do use it in the ngIf I get the following error
Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
Questions:
Is this the right approach?
An example of a Reactive Dynamic form with FormBuilder and FormArray with Radio inputs
Here is my code
https://gist.github.com/webwizart/121c85a0f316f47977cc0c99455af7bf
I would think using the tags should be reserved for unique identifiers? I wouldn't be surprised if dom renderer will update all elements with the same id.
Not sure if this will help, but you could use an answer view model instead (containing the same data) but that also has a 'checked' property
This way you can be sure that it will behave as you would expect.
e.g.: (in your component.ts)
let answers = this.question.Question.PossibleAnswers
.map(a =>
{ return Object.assign({}, a, { checked: false });
}
);
then in html you use: 'answer.checked' instead of 'radio.checked'
ps: also you could use ng-container instead of span, so you don't have an extra DOM imprint in your html
I want to set value of autocomplete field using xf:setvalue. I know that firstly I have to set value of field and then set label (#label). I try to do that in following way:
<xf:setvalue ref="xxf:instance('fr-form-instance')//*[name() = $autocomplete-name]" value="'myValue'"/>
<xf:setvalue ref="xxf:instance('fr-form-instance')//*[name() = $autocomplete-name]/#label" value="'labelValue'"/>
After that in form builder I see, that in main instance it looks properly:
<xf:instance id="fr-form-instance" xxf:exclude-result-prefixes="#all">
<form>
<section-5>
<control-10 label="labelValue">myValue</control-10>
</section-5>
</form>
</xf:instance>
but unfortunately in my autocomplete field there is no change. I can notice the change only if I go to 'edit source' button in form builder, and without any change, I click 'apply'. Then autocomplete is automatically refreshed and I see my label: 'labelValue'. What should I do, to refresh autocomplete field after setvalue ??
regards
You need to do this by setting the label of the autocomplete, not its value, which is done by dispatching the fr-set-label event to the autocomplete control. Then, internally, the autocomplete will do something very similar to what it does if the user had entered that label, in particular calling the service to retrieve the corresponding value.
I am facing issue in Setting the Value of Select Box in Grid .
Scenario: in the ListGrid i am having two Combo box .
For One combo box i am getting the value in the list during the onload and displaying .
On change value of first combo i need to fetch data from a list with input value from frst combo. i am getting the value from list but when i try to set in the second combo its not loading
Please find my code below.
//Properly Loading Combo
TaskName=new ListGridField("task_name","task_label);
SelectItem taskItem=new SelectItem("task_name","task_label);
taskNameList=populateTaskName();//Getting while onload
taskItem.setValueMap(taskNameList);
taskItem.addChangedHandler(...);
TaskName.setEditorType(taskItem);
TaskName.setValueMap(taskNameList);
TaskName.setRequired(true);
TaskName.setCanEdit(true);
//Not Loading Combo
SubTaskName=new ListGridField("Sub_task_name","Sub_task_label);
SelectItem subTaskItem=new SelectItem("Sub_task_name","Sub_task_label);
subTaskItem.addChangedHandler(...);
SubTaskName.setEditorType(taskItem);
TaskName.setRequired(true);
TaskName.setCanEdit(true);
//ChangeHandlerFor taskItem-FirstCombo
onChange(){
Form item=event.getItem();
item.setTooltip(item.getDisplayValue());
String taskId=String.valueOf(item.getValue());
populateSubTaskname(taskId);
subTaskItem.setValueMap(subtaskNameList);//getting the subtaskname List from RPC Call
SubTaskName.setValueMap(subtaskNameList);
populateSubTaskname(){
getting the value and loads in List
//subtaskNameList
subTaskItem.setValueMap(subtaskNameList);//getting the subtaskname List
SubTaskName.setValueMap(subtaskNameList);
}
//ChangeHandlerFor taskItem-Second Combo
onChange(){
Form item=event.getItem();
item.setTooltip(item.getDisplayValue());
}//Here also Name in the Map is not setting instead setting the value alone sometimes
Please help me where im wrong.
Once value in the combobox/select item changes, you need to assign it again to List grid field.
eg: listGridField.setEditorProperties(selectItem)
I'm trying to dynamically add new form components to a fieldset inside a form and I'm struggling with the checkbox component.
I'm getting the "TypeError: Ext.form.Checkbox is not a constructor" error on firebug. Here's my code:
...
Ext.getCmp('component1').add(new Ext.form.DisplayField({value: "aValue"}));
Ext.getCmp('component1').doLayout();
Ext.getCmp('component2').add(new Ext.form.Checkbox({fieldlabel:"aLabel",
name: "aName"}));
Ext.getCmp('component2').doLayout();
...
Both components (component1,component") are xtype:fieldset and look exactly the same.
The first component, the DysplayField works correctly but the checkbox doesn't.
Can you help me? Thank you
you may need check the layout of component2. or compare the layout between component1 and component2. Try to set the layout as the same.