Using MUI #Next and the TextField component.
MUI very nicely adds a little * at the end of the label when you add required as a prop, however it seems to not work out of the box when you add the endAdornment in order to enable a "show password" toggle.
I have created a codesandbox of my issue.
The regular <Texfield /> component shows the * as expected, but the also required password field doesn't.
While making the codesandbox reproduction of my issue, I found the answer, but thought I'd leave it here for others who come across this.
The required prop has to go on the <FormControl /> wrapper of the input:
<FormControl required ... >
<InputLabel ... >Password</InputLabel>
<Input ... />
</FormControl>
Related
I am using antd and vue3 in my project. Hence I validating the fields with antd validation.
The validation is not working properly. I have provided only the required validation. It is denoting If I din't enter the value. But The error message is not disappearing even after entering the proper value.
In my usecase, Since I am creating the fields dynamically. I am looping the fields using v-for. Refer the below code for further clarification,
<a-row :gutter="16">
<a-col class="gutter-row" :span="12" v-for="(field, index) in Object.entries(formState.additonal_data)">
<a-form-item :label="field[0].replaceAll('_', ' ')" :name="`additonal_data[${field[0]}]`" :rules="[{ required: true, message: 'Please input your '+field[0].replaceAll('_', ' ') }]">
<a-input v-model:value="formState.additonal_data[field[0]]" />
</a-form-item>
</a-col>
</a-row>
In the below image, You can see even after entering details, The error message is not disappearing. I need it to be disappeared once If the proper values are entered.
Any help is appreciated.
Thanks in advance.
I'm writing a user management using react-admin and try to make adding users to groups easier, i.e. by adding groups from a user's edit page using auto-complete. Starting with an example, I've got some success using the following:
<ReferenceArrayInput
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
{...props}
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
However, this method uses Chip component to display selected items inline. I would like to use a Datagrid instead. I know from the source code that I cannot override the display part of an auto-complete (yet?), so I thought I could resort to hiding Chips via CSS, but I would still need a way to display a Datagrid with current selection. So I tried this (it's wrapped in FormWithRedirect, hence formProps):
<ReferenceArrayField
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<Datagrid>
<TextField source="name" />
</Datagrid>
</ReferenceArrayField>
<ReferenceArrayInput
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
This works almost exactly as I want it, a Datagrid is displayed and it shows the right data for the selection, however, it's not updated when selected items on AutocompleteArrayInput change. How ever I tried (been through probably all the hooks and contexts), I could not make it work.
Is this possible? How can I make Datagrid update when selection changes on AutocompleteArrayInput?
I have a simple component which is rendered by a click function, but it gets rendered twice, this is my code.
<SeeCompany
:is="create"
v-bind:companyId="companySelected"
#closeChild="closeModule"
/>
when i clicked in the button i change the create value to 'SeeCompany' so it gets mounted, but it repeats the same component text twice on the screen.
<b-button block
#click="create = 'SeeCompany'"
class="m-sides"
variant="outline-primary">
Ver
</b-button>
here is the image:
EDIT: Here is the code in the mounted
export default class SeeCompany extends Vue {
#Prop({ default: 0 }) private companyId !: number;
constructor() {
super();
}
private mounted() {
console.log(this.companyId); --> This is consoling two ceros (0) and the passed value for instance = 1;
}
}
There are two main uses for is.
Working around limitations in in-DOM templates.
Dynamic components.
For more information see https://v2.vuejs.org/v2/api/#is.
We can ignore the former case as it isn't relevant here.
Typically the second case looks a bit like this:
<component :is="childName" />
Here childName is a property of the component and determines the name of the child component to use. In your example you called it create.
The actual tag name used in the template doesn't really matter. It is common to use the dummy tag <component> for this purpose to avoid misleading future maintainers who may not immediately notice the :is. Whenever you see <component> you know you're in a dynamic component scenario.
When we talk about dynamic components it is important to appreciate exactly what we mean by 'dynamic' in this context. We are specifically talking about which component to use. We are not talking about determining whether or not to create the component in the first place.
In the code in the question the value of create is initially set to an empty string, ''. This is then passed to :is. If you inspect the DOM you'll find that this creates a comment node. While this does make some sense I am unclear if this is officially supported. I've not seen this behaviour documented anywhere and I suspect you may be getting lucky by falling down an internal code path that's intended for other things. It is not something I would be confident relying on in future versions of Vue.
The specific code of interest is:
<SeeCompany
v-bind:is="create"
v-bind:companyId="1"
/>
<SeeOther
v-bind:is="create"
v-bind:companyId="1"
/>
So if you inspect the DOM when create is '' you should find two comment nodes.
When create gets set to SeeCompany this is equivalent to:
<SeeCompany
is="SeeCompany"
v-bind:companyId="1"
/>
<SeeOther
is="SeeCompany"
v-bind:companyId="1"
/>
In turn this is equivalent to:
<SeeCompany
v-bind:companyId="1"
/>
<SeeCompany
v-bind:companyId="1"
/>
The result is the creation of two SeeCompany components. The original SeeOther tag is irrelevant here. This is why, as noted earlier, the convention exists to use a <component> tag to avoid being misleading.
Of course this isn't what you actually wanted the code to do. I'm unclear what the target behaviour is so I'm going to cover a few variations.
If you just want to show the components conditionally you'd use v-if instead:
<SeeCompany
v-if="create"
v-bind:companyId="1"
/>
<SeeOther
v-if="create"
v-bind:companyId="1"
/>
Usually you'd want create to be a proper boolean, false or true. So set the initial value to false with #click="create = true".
Of course this would show both SeeCompany and SeeOther at the same time. That may not be what you want either. Perhaps you only want to show one at once. For that you might do something like this:
<SeeCompany
v-if="create === 'SeeCompany'"
v-bind:companyId="1"
/>
<SeeOther
v-if="create === 'SeeOther'"
v-bind:companyId="1"
/>
Here the initial value of create should be a falsey value of some kind, possibly '', with #click="create = 'SeeCompany'" and #click="create = 'SeeOther'" on appropriate buttons.
If the props for the components are all the same, and especially if there are more than two components involved, you could try to simplify this using is:
<component
:is="create"
v-if="create"
v-bind:companyId="1"
/>
This is shorter but arguably not as clear.
I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!
If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging
On this page https://bootstrap-vue.js.org/docs/reference/validation/ of the documentation of bootstrap-vue, they are giving an example of how to use vee-validate.
However, their example doesn't work for me, because i get a warning saying [vee-validate] A field is missing a "name" or "data-vv-name" attribute. In deed, there is no name or data-vv-name attribute in their example and after adding one of them, it works like a charm.
Is this example outdated / wrong?
<b-form-input id="example-input-1" v-model="form.name" v-validate="{ required: true, min:2 }":state="validateState('form.name')" aria-describedby="input-1-live-feedback" placeholder="Enter name"enter code here></b-form-input>
The documentation has been updated to require name attribute and not v-model binding.
<input v-validate="'required|email'" type="email" name="email">
So Yes. this needs to be updated