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.
Related
I have to show date field. After giving multiple true, the picker is showing wrong value.
Added code:
<v-date-picker :landscape="$store.state[parentName].landscape" v-model="$store.state[parentName].picker"
:multiple= "true"
#input="handleInput" >
</v-date-picker>
Please help me out. From where this 10 selected is coming. Where did i went wrong.
I think from your code, your v-model data, $store.state[parentName].picker already have any value.
You can see this value using Vue.js devtools.
If don't have any value on v-model, please anotate the comment.
If you already have any value, and you don't expect
You should clear the $store.state[parentName].picker in beforeMount or beforeCreate.
I have several checkboxes that I use for display purposes of 'true' and 'false'. Each one will show me the above warning (I made the warning more generic for the purposes of searching. In reality, it reads #Model.Service_Request_Information.Servicelead, etc, instead of #Model.property)
<input class="custom-control-input" type="checkbox" checked="#item.Servicelead" disabled />
I have read that it is okay to write razor code like this, and the HTML will insert/leave out 'checked' from the attributes depending on the value. It works fantastically for how I want it, and it doesn't prevent my code from compiling. So, any ideas on why I am getting this warning?
Razor will render a boolean attribute if the expression you pass to it evaluates to true. If the expression evaluates to false, the attribute is not rendered at all. That is the Razor feature you are using in your example.
In HTML, valid values for the checked attribute are an empty string or "checked" (Specs) i.e. checked or checked="checked". Visual Studio reports HTML errors as warnings by default, which is what you are seeing. You can either ignore it, turn HTML validation off:
Tools > Options > Text Editor > Html > Validation
Or you can use a ternary expression as demonstrated by other answers:
#(item.Servicelead? "checked" : "")
The checked attribute does not have a value. It should only be set when #item.Servicelead is true.
Use this code instead:
<input class="custom-control-input" type="checkbox" #(item.Servicelead? "checked" : "") disabled />
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>
Currently I am building a hybride app for android devices. I am trying to use the ojInputNumber component to force a numeric keyboard show up on the device. Unfortunately, the component binding always gives type="text".
I have a list of objects which contains traits, while looping over traits, the following snippet will be loaded on screen based on the entrytype.
<div class="inputNumberWraper" data-bind="if: trait.getEntryType() === 'MANUALNUM'">
<input class="inputNumer"
data-bind="attr: {id: trait.getTraitCode()}
, ojComponent: {component: 'ojInputNumber'
, value: trait.getValue()
, min: trait.getMinValue()
, max: trait.getMaxValue()
, optionChange: changeListener
, required: trait.isMandatory() }"/>
<span data-bind="ojModule:{name: 'inputComponents/inputNumberFixer'}" />
</div>
I have tried to load a module (inputNumberFixer) after this the component is binded. To manually change the input type from text to number with jquery.
$(document).ready(function(){
$('.inputNumer').attr("type", "number");
$('.oj-inputnumber-button').hide();
});
this works until I select another object from the list and the input fields "refreshed". The type I have changed is put back to text but the inputnumberfixer did not run for the 2nd time.
Does anyone know how to force this component to bind the input type to number?
Unfortunately, no. There is not a way to force this today(v2.0.0 of JET). The ojInputNumber component is a generated component that provides the "spinner" option for easily increasing and decreasing the number value, but it does not set the number type so that the proper number keyboard shows up on a mobile device.
I've filed an ER for this to be fixed to show the proper keyboard. It should change in a future release.
I have an input box with placeholder.and I am setting the value in this field via Session variable in php.
This is the code which I have written :
<input type="text" value=<?=$_SESSION['no_of_persons']?> name="no_of_persons" id="no_of_persons" placeholder="No. of Person(s)" maxlength="3" />
and when I run this in firefox and watching the code in Firebug this following code is coming :
<input id="no_of_persons" type="text" maxlength="3" placeholder="No. of Person(s)" name="no_of_persons" value="7">
Problem is I am not able to see the value in textfield in the web page.
I go to firebug and edit html in firebug. What I do is when I press an space key at the end of input tag i.e after value="7" then the value 7 becomes visible on web page.
I am not getting why the browser automatically changing the sequence of attributes of input tag and also I already had closed input tag then why the browser not closing it.
I tried it in other browser also like safari,chrome but not working.
Please help me to get rid off this problem.
Thanks in advance!!! :)