I have an edit form, where I have an input that I'm sending an array of data through.
However, in the edit form, even though the input is returning me an array of data to edit, they are as a single value.
That is, if I remove a data returned in this input, all are removed. Also, the names in the input are all pasted together.]
What I'd like to try if it's possible is to return the data this way in the edit form:
And from that, I could remove the name "Melissa" and submit the form again. Through autocomplete, the user should be able to search for another name to replace "Melissa", without changing the values that are already present.
But I'm getting the data this way:
I created a Codesandbox of how I'm doing it in my code: https://codesandbox.io/s/intelligent-ace-9wbz44?file=/src/App.tsx
Can you help me with this?
I'm assuming you want to use testValue as the default options for your Autocomplete component.
Remove value={field.value}
Match testValue's type to studentOptions's type
const testValue = [
{
value: "João Lima",
label: "João Lima"
},
{
value: "Ana Clara",
label: "Ana Clara"
}
];
Change result to result={field.value ?? testValue}.
Working sandbox: https://codesandbox.io/s/condescending-euler-0gt9c9?file=/src/App.tsx
Related
I have five fields in my react-hook-form. Four of them has textarea type and one it is input field for files upload. I used control component for him. With textarea fields i have not problem, but with files field I have. When I open modal with form I can not see that, that my input for file has registed. How did I see that? When i type submit without values, i cant see my fifth field in errors console. Just for inputs: errors {title: Object, category: Object, description: Object, specification: Object} But i just typed submit. All of my textarea inputs sends required mistakes. But input not. And when i type submit second time i see uploadFile mistake: errors {title: Object, category: Object, description: Object, specification: Object, uploadFile: Object}. It`s wrong, I think
I try to add ref in my control, but i think i did it wrong. I created my component in codesunbox with show console. https://codesandbox.io/s/jolly-glade-hhhbdo
I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.
I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:
app.component.ts
this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);
STACKBLITZ
SCREENSHOT
Can you have a look at this Stackblits
Note that I have modified the submit method and have added
if(this.form.get('titleArms').value === 'changeArm'){
this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}
Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]
Also added the if condition to check selection of radio button.
UPDATE:
since you have used tab names to create the text in the parent component.
In the submit method
need to do the tab name update before emitting the updateDataEvent.
submit(): void {
if (this.form.get('titleArms').value === 'changeArm') {
if (this.form.get('titleTextArms').value !== '') {
this.tabs[this.selected.value].name =
this.form.get('titleTextArms').value;
}
}
this.updateDataEvent.emit({
formdata: this.form.getRawValue(),
tabs: this.tabs,
});
}
The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.
You submit the value, but you are not updating the tabs.
For example, in your submit method add this hard-coded update and then press the Save button:
this.tabs[0].name = "test";
Because now you updated the first tab's name, you should see the change.
I have a formik form with a shape that looks something like this:
values:{
category1:{
name
},
category2:{
name
}
}
The names of the fields are category1.name and category2.name.
I'm trying to code up a validation errors handler that will accept the errors from formik context, and which can then provide a clickable link to whichever field is erroring out. My issue lies in the way that formik returns errors. They follow the same format as the final submitted object. Thus, my errors object looks something like this:
errors:{
category1:{
name: "error for category 1 name"
},
category2:{
name: "error for category 2 name"
}
}
I can flatten the object to recursively determine the dot notation name of each error as something category1.name and category2.name with a helper function, but that's sloppy looking and gives anyone reviewing my code something else to view and consider.
Does formik expose the names of fields in dot notation anywhere? For reference, I am using the useFormikContext hook, and I am passing the context generated from that (IE myFormikContext = useFormikContext(myFormikOptions), and I'm searching for the original field names in myFormikContext)
Tech stack is typescript with formik for form generation and yup for validation, in case that's relevant.
Does appending 'as const' to your objects, help?
values:{
category1:{
name
},
category2:{
name
}
} as const;
I am using react-select to allow the user to choose their birth year. If the user has already filled it in, it will be preset to some value, e.g. 1950. The input shows the correct value, however when the menu is opened it is scrolled to the top and shows the most recent years (2018, 2017, 2016, etc).
How do I get it to scroll down to 1950 and highlight that item by default?
My code:
class YearPicker extends React.PureComponent {
options = [
{label: 2018, value: 2018},
{label: 2017, value: 2017},
// ...
{label: 1950, value: 1950},
{label: 1949, value: 1949},
// ...
]
render () {
return (
<Select
options={this.options}
value={this.props.value}
/>
)
}
}
CodeSandbox—this should default to 2002. Once you select a value (2002 or otherwise) it works fine, but when the page first loads you have to scroll down within the menu to find the value.
Per the docs I have tried value and defaultValue as well as selectedOption but nothing seems to work. I created a very hacky workaround by leveraging onMenuOpen to find the correct DOM element after it's rendered and then scroll to it, however this breaks the functionality of the arrow keys.
I looked at their source code and actually, you are doing everything right. The issue is in the following line of their code in Select.js:
const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);
Here they are determining the index of the default option using indexOf and comparing objects. Object equality is performed by reference and not by value. So when you initialize the component for the first time and you explicitly provide an object, the equality fails. Wrong option is highlighted only for the first time. Rest of the times, object equality works since they extract the selected object out of the options and indexOf works
Check the working fork https://codesandbox.io/s/0xzmy6wvln
What I have done is created a function that extracts the selected option from the options array and passes that and so the equality works even for the first time.
I would encourage you to raise this issue on their repo and try to get it fixed.
Set the default value to the object from the options menu.
<Select
options={this.options}
defaultValue={this.options.find(option => option.value === this.props.value)}
/>
This is a workaround for the bug that #cdoshi described.
Please look at the following jsbin
You will notice that there are two fields. One is a normal input while the other is a new field type that references exampleDirective. Please note...in my real application, these fields are pulling pulled from JSON and are not manually added to the fields array.
I set the DefaultValue on each record within the fields array. Again, these default values are being pulled from JSON.
The RegularInput field is properly displaying the default within its input field.
The DirectiveInput is not. Please look at the model and you will see that the default value was applied to the field itself and not the input field (or fields if I had multiple) within the directive.
Is there a way to make DefaultValue work in this type of situation? And if not...what would the best way to get the value that I am pulling from JSON to be placed on the directive fields?
just update your incoming json to include the "defaultValue" in the form object that gets passed to your directive. Try this: http://jsbin.com/coyuriyazu/1/edit?html,js,output
I ended up fixing my issue by passing data INTO the directive.
formlyConfig.setType(
{
name: 'dirTest1',
template: '<div directive-test checked="to.IsChecked" amount="to.CoverageAmount"</div>'
});
With this approach, I can specify IsChecked and CoverageAmount in my directive and pass the values that I need when setting up the various inputs within the directive. So, when I push this field type to my fields array, I can easily set my values like so:
var newRow = {
key: TestKey,
type: dirTest1,
templateOptions: {
CoverageAmount: 12345,
IsChecked: true
}
};
vm.fields[i].fieldGroup.push(newRow);